• invalidateQueries은 화면을 최신 상태로 유지하는 가장 간단한 방법이다.
• 예를 들면, 게시판 목록에서 어떤 게시글을 작성(Post)하거나 게시글을 제거(Delete)했을 때 화면에 보여주는 게시판 목록을 실시간으로 최신화 해야할 때가 있다.
• 하지만 이때, query Key가 변하지 않으므로 강제로 쿼리를 무효화하고 최신화를 진행해야 하는데, 이런 경우에 invalidateQueries() 메소드를 이용할 수 있다.
• 즉, query가 오래되었다는 것을 판단하고 다시 refetch를 할 때 사용한다!

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";

const useAddSuperHeroData = () => {
  const queryClient = useQueryClient();
  return useMutation(addSuperHero, {
    onSuccess(data) {
      queryClient.invalidateQueries(["super-heroes"]); // 이 key에 해당하는 쿼리가 무효화!
      console.log(data);
    },
    onError(err) {
      console.log(err);
    },
  });
};

• 만약 무효화 하려는 키가 여러 개라면 아래 예제와 같이 다음과 같이 배열로 보내주면 된다.

queryClient.invalidateQueries(["super-heroes", "posts", "comment"]);

• InvalidateQueries의 경우 정확한 키가 아닌 querykey prefixes를 사용하는데 만약 정확한 키를 사용하고 싶다면, 아래와 같이 { exact:true } 를 설정해주면 됩니다.

  queryClient.invalidateQueries({
    queryKey: ['todos'],
    exact: true,
  })
  

• enabled: false 옵션을 주면queryClient가 쿼리를 다시 가져오는 방법 중 invalidateQueries와 refetchQueries를 무시한다.

  • Disabling/Pausing Queries 참고

• 자세한 내용은 queryClient.invalidateQueries 정리를 참고하자.

• 일반적으로 mutation을 호출하면 변이에 있는 onSuceess핸들러가 관련 쿼리를 무효화하고 이에 따라 데이터 리페치가 트리거 된다.

Query Invalidation | TanStack Query Docs