리액트쿼리를 프로젝트에 사용하는데 특정부분에서 쿼리무효화가 되지 않았었다.
왜 안되는건지 구글링에서 살펴본 결과, 1시간을 삽질을 했다.
해결한 뒤, 조금 허무맹랑했다. 설명하기전에 쿼리무효화에 대해 짧게 설명하겠다.

쿼리 무효화는 리액트 쿼리에서 GET한 데이터를 최신데이터로 업데이트 시켜주기 위해 사용한다.

나는 react-query를 설치하고 아래코드처럼 옵션을 지정했었다.

  const queryClient: QueryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        refetchOnMount: false,
        refetchOnReconnect: false,
        staleTime: 1000 * 60 * 60,
        cacheTime: 1000 * 60 * 60,
      },
    },
  });

언뜻 보기엔 문제가 없다. 하지만 문제는 항상 나였다. 난 제대로 알지못하고 구글링해서 나온 코드로 복붙만 하고 넘어가서 무슨 원인인지 이때까지는 알지 못했었다.

쿼리무효화가 잘 되지 않았었던 이유는 refetchOnMount: false로 설정했기 때문이였다. 이 옵션은 특정 쿼리를 무효화할때, 그 특정쿼리를 불러오는 컴포넌트가 unmount 상태면 그 쿼리는 inactive(비활성 상태)가 되기 때문에 쿼리 무효화가 되지 않았던 것이였다.

쉽게 설명하자면, 한 영상이 있다고 가정하고 그 영상에 댓글을 달 수 있는 기능을 포함하고 있는 A컴포넌트가 있다. 그리고 마이페이지에서는 내가 단 모든 댓글 리스트들을 조회할 수 있는 B컴포넌트가 있다.

A컴포넌트에서 내가 댓글을 달았고 B컴포넌트로 이동해서 내가 단 모든 댓글들을 조회할려고 한다. B컴포넌트는 최신 댓글리스트를 보여줘야하기 때문에 A컴포넌트가 댓글을 등록(POST)하면 B컴포넌트를 위해서 쿼리무효화를 통해 최신데이터로 업데이트시켜줘야한다.

그렇기에 A컴포넌트에서 B컴포넌트의 모든 댓글들을 불러오는 쿼리키를 통해 무효화를 해야한다. 현재 나는 A컴포넌트에 있고 B컴포넌트는 현재 unmount상태이기 때문에 refetchOnMount: false상태에서 쿼리무효화를 할려고 해도 되지 않는다.

How To Solve?

방법은 간단한다. 쿼리무효화를 할때 아래 코드처럼 이 옵션을 추가해주면 된다.

queryClient.invalidateQueries("B쿼리키", { refetchInactive: true });

허허....

마지막으로

앞으로는 구글링한 코드를 사용하게 되면 그 코드가 어떻게 동작하는지 제대로 알고 써야겠다.
프로젝트 초반에 넣은 코드여서 신경쓰지 못한 내가 너무 안타까웠다 ㅜㅜㅜ

---

레퍼런스
1. https://pebblepark.tistory.com/32
2. https://stackoverflow.com/questions/70267993/react-query-refetchonmount-false-with-invalidated-query