JavaScript/Next.js

react-query (2) - useQuery

크런키스틱 2023. 2. 14. 14:02
728x90

이번 포스트에서는 react-query에서 데이터를 get 하기 위한 방식인 useQuery에 대해 알아본다.


1. 기본 사용

import {
  useQuery,
} from "@tanstack/react-query";

const test = useQuery(["test"], testApi,
    {
        enabled: true,
        retry: 0,
        refetchOnWindowFocus: false,
        onSuccess: (data) => console.log(data),
        onError: (e) => console.error(e)
    }
);

// ex.1) () => testApi(params)
// ex.2) enabled: 변수명
// ex.3) test.refetch()

위와 같은 방식이 가장 일반적인 useQuery 사용 방법이다.

  1. 첫번째 파라미터로는 배열 안에 key 값을 선언한다.
  2. 두번째 파라미터에는 비동기 api 함수를 지정해주는데 이 때, 인자가 필요한 api라면 ex.1)의 코드처럼 함수 형태로 넣어주면 된다.
  3. 세번째 파라미터에는 여러 옵션들을 추가 가능하다.
  • enabled의 경우, 동기적으로 사용가능하게끔 설정하는 옵션으로, true면 비동기 실행, false면 동기 실행이 가능하다.
  • enabled에는 변수를 통해도 설정이 가능하다.(ex.2 코드)
  • enabled를 false로 설정 시, ex.3코드 처럼 refetch를 해주는 trigger가 있어야 한다.
  • retry는 api 통신에 실패할 경우 재호출을 몇번 할지를 설정하는 옵션이다.
  • refetchOnWindowFocus는 윈도우가 다시 focus 될 때 api를 다시 호출할지 여부를 결정하는 옵션으로 필요에 따라 설정한다.
  • onSuccess와 onError는 각각 성공, 실패 여부에 따라 호출되는 함수들로, 본인이 필요한 함수를 설정해주면 된다.

본인은 옵션의 반복되는 것이 지저분해보여서 기본 설정을 해주었는데, 이는 이전 포스트에서 다룬 _app.tsx 파일에서 다음과 같이 설정해주면 된다.

const MyApp: NextPage<AppProps> = ({ Component, pageProps }) => {
	...
    // react query setting
    const queryClient = new QueryClient({
        defaultOptions: {
            queries: {
                retry: 0,
                refetchOnWindowFocus: false,
            },
        },
    });
	...
}

기본 설정에는 useQuery뿐만 아니라 useMutation, success, error 등에 대한 처리도 가능하지만, 본인은 그 외 처리들은 각각 api에 따라 지정이 필요하다고 생각이 들어 useQuery 옵션만 설정했다.

 

2. 화면구현

이제 react-query에서 불러온 데이터들을 통해 화면을 구현하면 되는데 각각 에러, 로딩 처리에 대한 화면도 구현이 가능하다.

{test.isSuccess && <p>{test.data}</p>}
{test.isError && <p>데이터가 없습니다!</p>}
{test.isLoading && <p>Loading...</p>}

각각 이렇게 설정이 가능하며 api를 통해 불러온 data를 사용할 때는 isSuccess 즉, api 통신이 성공하고 난 후에 data를 불러와야 화면 표현에 에러가 없이 설정이 가능하다.

 

하나의 컴포넌트에서 비동기 api가 많을 경우에는 useQuery로 일일히 선언하는 것보다 useQueries를 사용하는 것이 깔끔하다.

const result = useQueries([
  {
    queryKey: ["test1"],
    queryFn: () => test1Api()
  },
  {
    queryKey: ["test2"],
    queryFn: () => test2Api()
  }
]);

 

 

이상으로 useQuery의 기본 사용법에 대해 알아보았다.

 

다만, 계속 스터디가 필요한 사항은 캐싱에 대한 부분으로, 본인의 플랫폼이 어느 상황에서 최신 데이터를 요구하는지에 따라 stale, cache time, 그 외 조건들을 알맞게 설정할 필요가 있다.

 

다음 포스트에서는 post, patch를 위한 useMutation에 대해 알아본다.

728x90