@tanstack/react-query의 useQuery를 알아보자.

리액트 쿼리의 버전이 v4로 업데이트 되면서 설치 방법이 바뀌었다.

yarn add react-query

위의 코드로 설치하면 type에러 및 react-query가 계속 실행이 되지 않을 것이다.

설치는 이렇게하자!

yarn add @tanstack/react-query

react-query로 데이터 패치를 해보자.

post ⇒ useMutation

get ⇒ useQuery 를 이용하여 데이터 패치를 할 수 있다.

 

post를 할 때는 굳이 useMutation을 해야하나 싶은 생각에, 이번 프로젝트에서는 get 데이터패치만 react-query를 이용하려고 한다.

react-query를 이용하기 위해서는 _app.tsx에서 리액트쿼리를 사용하겠다고 세팅을 해주어야한다.

import { QueryClientProvider, QueryClient, QueryFunction } from '@tanstack/react-query';

const queryClient = new QueryClient()

function MyApp({Component, pageProps}:AppProps){
	return (
		<ThemeProvider theme={theme}
			<QueryClientProvider client={queryClient}>
				<Component {...pageProps} />
			</QueryClientProvier>
		</ThemeProvider>

useQuery에 대해 알아보자!

useQuery란?

QueryKey를 기반으로 데이터 캐싱을 관리한다.

쿼리가 변수에 의존하는 경우에는 QueryKey에도 해당 변수를 추가해주어야한다.

useQuery(unique한 키값, fetcher 함수)

fetcher함수란?

쉽게 말해서데이터 패치를 할 함수를 말한다.

여기서 useQuery의 두번째 인자인 fetcher은 옵셔널 값으로 적용할 수 있다.

옵셔널 값으로 적용하기 위해서는 기본세팅이 필요하다.

import { QueryClientProvider, QueryClient, QueryFunction } from '@tanstack/react-query';

const defaultQueryFn: QueryFunction<unknown, readonly unknown[]> = async ({ queryKey }) => {
  const { data } = await Axios.get(queryKey[0] as string);
  return data;
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      queryFn: defaultQueryFn,
    },
  },
});

를 이용하여 추가하자!

fetcher함수를 default로 만드는 것이다.

await Axios.get뒤의 인자에 baseURL을 주면 되는 것이다.

 

나는 Axios로 baseURL을 env에 있는 파일에서 설정해주었기 때문에, 뒤의 queryKey만을 받기로 하였다.

function Post({ postId }) {
  const { status, data, error, isFetching } = useQuery([`/posts/${postId}`], {
    enabled: !!postId,
  })

  // ...
}

위와 같이 useQuery를 쓸 때 인자 값으로 QueryKey를 api의 주소를 써주면 된다.

 

post함수에서 가지고오는 데이터는 data를 이용하면 되고, isLoading과 isError의 값에 따라 데이터가 로딩인지, 에러가 떴는지 바로 알 수 있듯이, 데이터 패치 부분이 카테고리 키 값으로 api를 바로 찌를 수 있어서, 쉽게 할 수 있었다 .