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로 저장하고 말고는 전혀 필요가 없는 부분인것 같다.