React Query

React Query: 동적 데이터 관리를 위한 도구 (Feat. 열일)

리액트 쿼리를 다뤄보지 않았다.

이번에 팀프로젝트하면서 처음 다뤄봄...

결론은 좋은 녀석 깔끔한 녀석

일단 리액트 쿼리에 3가지 핵심 개념

Query, Mutation, Cache 

이번에 사용한 것은 use Mutation이다.

뮤테이션은 서버에 데이터를 변경하는 요청,

뮤테이션을 통해 데이터를 갱신하고 그 후의 쿼리 결과를 업데이트해서 최신 데이터 유지가 가능하게 해 준다.

 

먼저 데이터 변경 로직을 구현한 후

 

interface editProps {
  postId: number;
  text: string;
}

export const editPosts = async ({ postId, text }: editProps) => {
  try {
    const response = await axios.put(`/api/posts/${postId}`, {
      content: text,
    });
    return response.data;
  } catch (error) {
    console.error(`editPosts Error: Time(${new Date()}) ERROR ${error}`);
  }
};

 

 

useMutaion(데이터 변경로직)을 넣고 실행하면 된다.

 

 const handleEditPosts = async () => {
    reviseTextMutate({ postId: post.id, text: text });
  };

const handleEditPosts = async () => {
    reviseTextMutate({ postId: post.id, text: text });
  };

 

너무 대충 넣어놓긴 했는데 지금 공부 중이라 리액트 쿼리에 관한 건 나중에 따로 포스팅할 예정이다.

아무튼 수정이 잘 된다.. 뿌듯

 

 

 

참고: 타입스크립트 사용한 쿼리의 useMutation에서는 파라미터를 하나밖에 못 받아와서 
여러 개의 변수를 사용하려면 아래 링크에 잘 설명되어 있으니 보시기 바람 

왜  작동 안 하는지에 대해서 위에서 설명하고 아래에 사용하는 법 나와있다

 

https://medium.com/swlh/how-to-use-multiple-parameters-in-usemutation-from-react-query-with-typescript-7e2aeec51446

How to Use Multiple Parameters in useMutation From React Query With TypeScript