[IDEARLY] Tanstack Query v5 (React Query)

IDEARLY 데이터 통신에 Tanstack Query 적용하기

1. Tanstack Query 세팅하기

yarn add @tanstack/react-query
yarn add @tanstack/react-query-devtools

설치후 아래와 같이 세팅해주었다.

import { RouterProvider } from "react-router-dom";
import router from "./routes/routing";
import GlobalStyle from "./styles/global";
import { ChakraProvider } from "@chakra-ui/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60,
      retry: 1,
    },
    mutations: {
      retry: 1,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ChakraProvider>
        <GlobalStyle />
        <RouterProvider router={router} />
      </ChakraProvider>
    </QueryClientProvider>
  );
}

export default App;

QueryClientProvider로 감싸고 queryClient에 dafult 값을 설정해준다.

2. Queries 사용하기

v5부터 인자를 객체로 전달하는 형태로 변경되어 다음과 같이 작성해주어야한다.

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

const query = useQuery({
	queryKey: ['todo'],
    queryFn: fetchTodo
});

export const fetchTodo = async () => {
	const data = await fetchTodoResponse();
    return data;
};

queryKey

queryKey는 캐시를 관리하기 위한 키값으로 배열형태로 사용된다.
string 형태로 해쉬해 key와 data를 mapping시켜 관리한다.

queryFn

queryFn는 promise를 반환하는 함수이다. (fetch, axios 등)
data를 resolve하고 error를 던진다.

3. Queries 옵션들

• enabled: 자동으로 query를 실행할지에 대한 여부 (기본값: true)
• retry: query를 동작 실패 시, 자동으로 몇번 만큼 retry를 시도할 지 결정하는 옵션
• select: response 값에서 필요한 값만을 추출할 수 있도록 하는 옵션

  {select: data => {id: data.id, data: data.data}}

• refetchInterval: 주기적으로 refresh하는 간격을 설정하는 옵션
• throwOnError: error boundary로 에러를 전파할 지 결정하는 옵션

4. Queries 반환값

• data: 마지막으로 resolved된 데이터
• error: 에러가 발생했을 때 반환하는 에러 객체
• isLoading: 최초 fetch가 in-flight 상태일 때 true값을 반환
• isFetching: fetch가 실행될 때마다 true 값을 반환

5. Mutations

서버의 데이터를 수정할 때 사용!

import { useMutation } from '@tanstack/react-query'

const query = useMutation({
	queryFn: fetchTodo
});

6. Mutations 옵션들

• onMutate: mutate 함수가 실행되기전에 실행되는 함수
  (optimistic update에 유용 / 좋아요 기능 등)

7. Mutations 반환값

• mutate: mutation 함수를 실행시키는 함수

8. useSuspenseQuery

React의 Suspense for Data Fetching API를 사용하기 위한 hook

Suspense for Data Fetching API란?
데이터를 불러오는 동안 fallback UI를 대신 보여주는 기능

const query = useSuspenseQuery({...});

위와 같이 사용하면 데이터 타입을 보장할 수 있다!
단, Query와는 다르게 enabled, placeholderData 옵션을 사용할 수 없고
throwOnError값을 임의로 지정할 수 없고 에러가 발생시 자동으로 에러 바운더리로 에러를 전파한다.

9. React-Query는 어떤 방식으로 데이터를 저장하고 있을까?

어떤 방식으로 데이터를 저장하길래 전역적으로 사용이 가능할까?

context를 사용하여 전역적으로 접근 가능

export const QueryClientContext = React.createContext<QueryClient | undefined>(undefined,)

useQuery가 실행되면 생성된 Query 인스턴스와 함께 key 값으로 mapping 시킴

this.#query = new Map<string, Query>()

이후 fetch된 데이터를 query 객체 내부에 저장