[TanStack Query] queryClient초기화관련

Hwanhoon KIM·2023년 7월 31일
0

의문

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

profile
Fullstack Developer, I post about HTML, CSS(SASS, LESS), JavaScript, React, Next, TypeScript.

0개의 댓글