QueryClient는 캐시와 상호작용하기 위해 사용된다.
// app.js에서
import { QueryClient } from "react-query";
const queryClient = new QueryClient();
<QueryClientProvider client={queryClient}>
<Hydrate state={pageProps.dehydratedState}>
<MyLayout>
<Component {...pageProps} />
</MyLayout>
</Hydrate>
<ReactQueryDevtools />
</QueryClientProvider>
// 사용할 때
import { useQueryClient } from "react-query";
const queryClient = useQueryClient();
queryCache, mutationCache와 상관이 있다.
queryClient.resetQueries("쿼리키", { exact: true });
The resetQueries method can be used to reset queries in the cache to their initial state based on their query keys or any other functionally accessible property/state of the query.
This will notify subscribers — unlike clear, which removes all subscribers — and reset the query to its pre-loaded state — unlike invalidateQueries. If a query has initialData, the query's data will be reset to that. If a query is active, it will be refetched.
exact: true는 쿼리키가 완전히 일치하는 것에만 적용할지에 대한 것!
false면 "쿼리키"를 포함하고 있는 쿼리들에 대해 리셋적용!
// 모든 쿼리 취소
await queryClient.cancelQueries()
// 쿼리키 'posts' 포함하는 비활성 쿼리를 제거
queryClient.removeQueries('posts', { inactive: true })
queryClient.removeQueries("쿼리키", { exact: true });
The removeQueries method can be used to remove queries from the cache based on their query keys or any other functionally accessible property/state of the query.
KeepPreviousData
새 데이터가 오는 동안 그 이전의 데이터를 사용할 것인지에 대한 여부
isPreviousData - 쿼리가 어떤 데이터를 가지고 오고 있는지 알 수 있다.
const { mutate, reset: saveReset } = useMutation(savemandu, {
onSuccess: async (data) => {
console.log("data", data);
queryClient.invalidateQueries("getmandu");
props.setCreateOpen(false);
setReset(!reset);
await ResetData();
await saveReset();
},
onError: (error) => {
console.log(error);
},
});
api를 날리고 선택했던 값들을 날리기 위해 이것저것 붙여봤었다.
일단 useMutation에서 saveReset은 당연히 효과가 없다. 이건 캐시랑 관련이 있기 때문에!
{props?.open && (
<DataSelect
selectData={
props.reset
? props.resetData && props.resetData[`${item.name}`]
: props.data && props.data[`${item.name}`]
}
error={props?.error[`${item.name}`.replaceAll("_", "")]}
onChange={(event: any) =>
props?.onChangeInput &&
props?.onChangeInput(
`${item.name}`.replaceAll("_", ""),
event
)
}
value={props?.data[`${item.name}`]}
/>
https://tanstack.com/query/v4/docs/reference/QueryClient
QueryClient | TanStack Query Docs
QueryClient The QueryClient can be used to interact with a cache:
tanstack.com
'프론트엔드✏️ > 개인공부' 카테고리의 다른 글
유효성 검사, 정규표현식 (0) | 2022.09.21 |
---|---|
유효성 검사 - 작성 중 (0) | 2022.09.20 |
useEffect vs useLayoutEffect (1) | 2022.09.19 |
[react-to-print] 리액트 컴포넌트 프린트하기 💌 (0) | 2022.09.16 |
[react-query, ] invalidateQueries, 에러 박스 (1) | 2022.09.16 |