캐시 데이터에 대한 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>
);
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>
}
'2차 공부 > TIL' 카테고리의 다른 글
24.09.06 개인과제 파일 input 트러블슈팅 (0) | 2024.09.06 |
---|---|
24.09.05 tanstack query, tailwind css, zustand, json-server, axios, supabase 프로젝트 세팅 (0) | 2024.09.05 |
24.09.05 Tanstack Query 세팅과 사용법 (0) | 2024.09.05 |
24.09.05 axios instance interceptor (0) | 2024.09.05 |
24.09.04 json-server / axios DELETE, PATCH (0) | 2024.09.04 |