TIL 51. React Query 사용해보기

React Query를 사용해보자.
useQuery는 get에서, useMutation은 add, patch(update), delete에 사용된다.

직접 사용해보는 React Query

• useQuery

  const { data: searchCoinData } = useQuery("searchCoins", searchCoin);

  보통 위처럼 사용하지만, 아래처럼 id같은 데이터를 받아야할 수도 있다.

  const { data, isLoading } = useQuery(["detailCoin", coinId], getCoinById);

  대괄호 안 쿼리 키로 쿼리 키와 데이터(coinId)를 담는다.

  // api.js
  
  export const getCoinById = ({ queryKey }) => {
    const [_, coinId] = queryKey;
    return axios.get(`${BASE_URL}tickers/${coinId}?quotes=KRW`);
  };

  { queryKey }를 console에 찍어보면 두번째 자리에 coinId가 존재한다. 구조분해할당을 했고, coinId를 사용할 수 있게 된다. 여기서의 return 값은 useQuery의 data에 담긴다.
  

• useMutation

  import { useMutation } from "react-query";
  
  const { data, isLoading, mutate, mutateAsync } = useMutation(mutationFn, options);
  
  mutate(variables, {
    onError,
    onSettled,
    onSuccess,
  });

  mutationFn은 통신 등의 처리가 이루어지는 함수이고, mutate는 mutationFn의 트리거가 된다. data에는 처리가 이루어지는 함수의 return 값이 담긴다.(return을 해준 경우) 위 베이스 코드를 아래처럼 적용할 수 있다.

  // useMutation을 여러개 쓰는 경우, mutate가 겹치기 때문에 updateMutate처럼 별칭을 지어준다.
  // isLoading도 마찬가지.
  const { isLoading: editLoading, mutate: updateMutate } =
  	// updatePost : (...) axios.patch('url', item)
      useMutation(updatePost);
  
  const editPost = (item) => {
      const itemData = {
        id: item.id,
        isEdit: !item.isEdit,
        isDelete: !item.isDelete,
      };
  	// updateMutate은 useMutation(updatePost)의 트리거
      updateMutate(itemData, {
        onSuccess: () => {
  		// invalidateQueries는 useQuery에서 사용되는 queryKey를 무효화.
  		// 현재와 다른, 필요없는 데이터이기 때문에 다시 가져와야하므로 get을 다시 실행
          queryClient.invalidateQueries("posts");
        },
        onError: (error) => {
          console.log("error : ", error);
        },
      });
      setDeletePw("");
      return;
    };
  
    const editPostValue = (item) => {
      if (item.userPw === deletePw) {
        const newPost = {
          id: item.id,
          userId: editId,
          content: editContent,
          isEdit: false,
          isDelete: false,
        };
        updateMutate(newPost, {
          onSuccess: () => {
            queryClient.invalidateQueries("posts");
          },
        });
        setEditId("");
        setEditContent("");
        return;
      } else {
        alert("암호가 틀렸습니다");
        return;
      }
    };