24.09.05 tanstack query default config

캐시 데이터에 대한 Life Cycle

상태	설명
fresh	데이터를 새로 패칭할 필요가 없는 상태, staleTime이 지나지 않은 상태로, 캐시 데이터를 그대로 사용할 수 있다.
stale	데이터를 새로 패칭해야하는 상태, staleTime이 지난 후로, 새로운 데이터를 가져오기 위해 쿼리가 실행된다.
active	현재 컴포넌트에서 사용중인 쿼리 상태, 컴포넌트가 마운트되어 쿼리를 사용하고 있을 때를 의미한다.
inactive	더이상 사용되지 않는 쿼리 상태, 컴포넌트가 언마운트되거나 쿼리가 더 이상 필요하지 않을 때를 말한다.
deleted	캐시에서 제거된 쿼리 상태, gcTime이 지나면 쿼리가 캐시에서 삭제되어 이 상태가 된다.
fetching	데이터를 서버에서 가져오고 있는 상태, 이 상태에서는 isFetching이 true로 설정된다.

 

default config

기본 설정	의미
staleTime: 0	useQuery 또는 useInfiniteQuery에 등록된 queryFn을 통해 fetch한 데이터는 항상 stale data취급
refetchOnMount: true	useQuery 또는 useInfiniteQuery가 있는 컴포넌트가 마운트 시 stale data를 refetch 자동 실행
refetchOnWindowFocus: true	실행중인 브라우저 화면을 focus할 때마다 stale data를 refetch자동실행
refetchOnReconnect: true	Network가 끊겼다가 재연결되었을 때 stale data를 refetch 자동실행
gcTime(cacheTime): 5분 (1000*60*5ms)	useQuery, useInfiniteQuery가 있는 컴포넌트가 언마운트 되었을 때 inactive query라 부르며, inactive상태가 5분 경과 후 GC에 의해 cache data 삭제처리
retry: 3	useQuery, useInfiniteQuery에 등록된 queryFn이 API서버에 요청을 보내 실패하더라도 바로 에러를 띄우지 않고 총 3번까지 재요청을 자동시도

---

default config값을 바꿔보자

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

페이지 우하단에 저런 아이콘이 뜨고 눌러보면 어떤 쿼리들이있는지 확인할 수 있다.

그럼 이제 defaultOptions를 바꿔보자. defaultOption은 queryClient를 생성할 때 지정해주면 된다.

import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: 5000,
        },
    },
});

createRoot(document.getElementById("root")).render(
    <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools initialIsOpen={false} />
        <App />
    </QueryClientProvider>
);

staleTime에 따른 query 상태 변경

const {
    data: todos,
    isPending,
    isError,
} = useQuery({
    queryKey: ["todos"],
    queryFn: fetchTodos,
    staleTime: 5000,
});

혹은 useQuery안에서 지정해주어도 된다.

 

---

Must Know options

1. enabled

enabled옵션은 쿼리 실행여부를 제어한다. 만약 어떤 이벤트발생시 쿼리실행을 원한다면 enabled를 false로 지정하면 된다.

const { data, refetch } = useQuery({
	queryKey: ["todos"],
	queryFn: getTodos,
	enabled: false
});

return (
  <div>
    <button onClick={() => refetch()}>데이터 불러오기</button>
  </div>
);

혹은 쿼리 두개의 실행순서가 설정이 필요할 때에도 사용된다.

// Dependent Query 예제 (순차적 query 실행)
// Get the user
const { data: user } = useQuery({
  queryKey: ['user', email],
  queryFn: getUserByEmail,
})

const userId = user?.id

// Then get the user's projects
const {
  status,
  fetchStatus,
  data: projects,
} = useQuery({
  queryKey: ['projects', userId],
  queryFn: getProjectsByUser,
  // 쿼리는 userId가 존재하는 경우에만 실행돼요 :)
  enabled: !!userId
})
// 여기서 !!userId 는 Boolean(userId)와 같습니다.

 

 

2. select

select옵션은 쿼리 함수에서 반환된 데이터를 변형하여 사용할 수 있도록 한다. 데이터의 특정 부분만 선택하거나 데이터를 변환하여 사용할때 유용하며 단, 캐시 데이터는 원본을 유지한다.

import { useQuery } from 'react-query'

function User() {
  const { data } = useQuery({
	  queryKey: ["user"],
	  queryFn: fetchUser,
	  select: data.map((users) => {
        return users.map(user => {
         return {...user, userNickname: 'abc'}
        }
      }
  });
  
  return <div>Username: {data}</div>
}