React-Query 사용기

오래만에 글을 쓴다.
그 동안 웹 포폴도 만들고 회사 과제전형도 보면서 바쁘게 살았는데
이번 과제전형을 진행하면 사용해보지 않은 기술을 사용해서 글을 쓰게 됐다.

react-query 사용은 해보고 싶었는데 기회가 없어서 미루다 이번에 사용하게됐다.

나는 이번에 react-query와 Next.js를 같이 사용했다.

useQuery

import { useQuery } from "react-query";

const {isLoading, error, data} = useQuery("queryKey", fetchFunc);

/// fetchFunc
async function fetchFunc () {
	const response = await fetch(API_ENDPOINT);
	
	return response;
}

   data,
   dataUpdatedAt,
   error,
   errorUpdatedAt,
   failureCount,
   isError,
   isFetched,
   isFetchedAfterMount,
   isFetching,
   isIdle,
   isLoading,
   isLoadingError,
   isPlaceholderData,
   isPreviousData,
   isRefetchError,
   isRefetching,
   isStale,
   isSuccess,
   refetch,
   remove,
   status,

데이터를 가져올 API Endpoint와 조건만 있으면 자동으로 fetch하고 위의 다양한 상태를 가져올 수 있다.

주로 isLoading, error, data 값을 많이 쓰는 것 같다.

이번에 Next.js와 사용할 때는 fetchFunc과 custom hook을 새로 만드는 방법을 사용했다.

/// fetchFunc
const fetchFunc = async () => {
  const response = await (await fetch(API_ENDPOINT)).json();

  return fetchFunc;
};

/// Custom Hook
const useFetch = () => {
  return useQuery("fetch", async () => await fetchFunc(), {
    refetchOnWindowFocus: false,
    refetchOnMount: false,
    refetchOnReconnect: false,
  });
};


/// App.js
import {useFetch} from './'

const {isLoading, error, data} = useFetch();

useFetch에 뭐가 주르륵 많이 달렸있는데 이건 내 삽질의 흔적이다...
데이터 패칭 후 해당 컴포넌트에서 state 변경 시 계속 refetch 되는 현상이 발생했고
Chrome Devtools를 눌렀다가 다시 브라우저를 누르면 데이터가 refetch되는 현상이 있는데 날 미치게 만들었다.

그래서 검색해보니 useQuery에 여러 조건을 추가할 수 있었는데

   cacheTime,
   enabled,
   initialData,
   initialDataUpdatedAt
   isDataEqual,
   keepPreviousData,
   meta,
   notifyOnChangeProps,
   notifyOnChangePropsExclusions,
   onError,
   onSettled,
   onSuccess,
   placeholderData,
   queryKeyHashFn,
   refetchInterval,
   refetchIntervalInBackground,
   refetchOnMount,
   refetchOnReconnect,
   refetchOnWindowFocus,
   retry,
   retryOnMount,
   retryDelay,
   select,
   staleTime,
   structuralSharing,
   suspense,
   useErrorBoundary,

굉장히 많다. 설정에 대한 상세 내용은 직접 검색해보슈
위에서 사용한 설정은

	refetchOnWindowFocus: false, /// 브라우저를 다시 눌렀을때 refetch 막기
    refetchOnMount: false, /// Mount 됐을 때 refetch 막기
    refetchOnReconnect: false, /// reconnect 됐을 때 막기
      아무튼 막기

아무튼 계속 refetch되는 것에 대한 이슈로 막을 수 있는건 다막아놨다.
그래도 문제가 해결되지 않아서 state 변경을 최대한 줄이는 작업을 진행했다..

useQuery parameter 넘기는 법

///App.js
const {isLoading, error, data} = useFetch(parameter);

///fetchFunc
const fetchFunc = async (parameter) => {
  const response = await (await fetch(API_ENDPOINT)).json();

  return fetchFunc;
};

///useFetch
const useFetch = (ctx: string) => {
  return useQuery(["fetch", ctx], ({ queryKey }) => fetchFunc(queryKey[1]), {
    refetchOnWindowFocus: false,
    refetchOnMount: false,
    refetchOnReconnect: false,
    
  });
};

parameter를 넘길땐 useQuery에서 queryKey를 배열로 감싸고 [1]번에 넣어준 후 fetchFunc에 queryKey[1]로 넘겨주면 된다.