[tanstack-query] invalidateQueries를 사용해도 업데이트가 되지 않는 문제

문제

질문을 닫으면 우측의 태그가 답변 완료로 업데이트가 되는 것을 기대하고 invalidateQueries를 사용했으나 업데이트가 되지 않았다. 한번 새로고침을 해야 업데이트가 되었다.

  const queryClient = useQueryClient();
  const id = useParams().id;
  const mutationFn = async () => {
    try {
      await axios.post("/closequestion", { id });
    } catch (error) {
      console.error(`Error occurred`);
    }
  };

  const { mutate } = useMutation({
    mutationFn,
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ["questionList"],
      });
    },
  });

기존 코드

원인

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 9000000,
      cacheTime: 12000000,
      refetchOnWindowFocus: false,
      refetchOnMount: false,
    },
  },
});

QueryClient 인스턴스를 만들 때 디폴트옵션에 refetchOnMount를 false로 지정하면 이런 일이 발생한다.

이 설정을 하면 언마운트 된 컴포넌트의 쿼리는(=inactive 한 쿼리는) 리페칭을 하지 않는다.

하지만 이 설정을 유지하면서 inactive한 쿼리를 업데이트 하는 방법도 제공중이다.

해결

  const queryClient = useQueryClient();
  const id = useParams().id;
  const mutationFn = async () => {
    try {
      await axios.post("/closequestion", { id });
    } catch (error) {
      console.error(`Error occurred`);
    }
  };

  const { mutate } = useMutation({
    mutationFn,
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ["questionList"],
        refetchType: "all", // ✨추가!!
      });
    },
  });

refetchType: "all" 을 준다.

refetchType?: 'active' | 'inactive' | 'all' | 'none'

refetchType 은 네가지 속성이 있는데 지정하지 않아도 기본값은 active로 설정되어 있다. all을 주면 모든 경우에 리페칭을 할 수 있다.

리액트 쿼리에서는 refetchActive, refetchInactive 라는 두가지 속성으로 제공 중인데 탠스택 쿼리로 넘어오면서 합쳐졌다.

버튼을 누르는 즉시 업데이트가 되어 다시 돌아가면 바로 색이 바뀐 태그를 볼 수 있다.