App.tsx
(최상위 컴포넌트)에서queryClient
를 초기화해주면 다른 컴포넌트에서 안 해줘야하는건가?
// App.tsx에서
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: Infinity,
refetchOnMount: false,
refetchOnWindowFocus: false,
retry: 3,
},
},
});
// 다른 하위 컴포넌트에서
const mutation = useMutation({
mutationFn: addTodoDB,
onSuccess: async () => {
await queryClient.invalidateQueries({
queryKey: ['todoList'],
});
},
});
하위컴포넌트의 useMutation
에서 invalidateQueries()
를 쓰기 위해서는 queryClient
가 있어야하는데, 다시 불러오려면 redux로 queryClient를 따로 스토어에 저장해서 써야하는건가?
아니면 그냥 하위 컴포넌트에서 const queryClient = new QueryClient()
를 다시 쓰고 사용하면 되는건가?
일단은 후자로 진행했는데 문제를 발견하지는 못 했다.
App.tsx
에서 초기화한 queryClient
인스턴스를 콘솔에 찍어보고, 다른 컴포넌트에서 const queryClient = new QueryClient()
로 새롭게 정의한 queryClient
를 콘솔에 찍어 서로를 비교해봤다.
그러니 App.tsx
에서 초기화한 그 queryClient
가 새롭게 정의한 다른 하위컴포넌트에서도 동일한 defaultOptions
를 갖는 것을 확인했고, 결국 같은 것이라고 판단한다.
굳이 App.tsx
(최상위 컴포넌트)에서 정의한 queryClient
를 프롭스로 내리고 받고, redux
로 저장하고 말고는 전혀 필요가 없는 부분인것 같다.