invalidateQueries

서론

Til 쓰기 프로젝트 2일차
react-Query 정말 편하고 좋은데
너무 겉 핥기 식으로 쓰고 있는 것 같아서 조금씩 알아보자는 내용

본론

Query Invalidation

서버 데이터가 오래됐다는 사실을 어떻게 파악할 것인지,
오래됐다면 언제 업데이트를 할 것인지에 대한 명세서.
기존의 쿼리를 무효화시키고 새로 갱신한다.
"데이터가 바뀌었으니까 refetch 해주세요" 같은 역할을 해줄 수 있다.

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

우선은 useQueryClient 를 import
useQueryClient는 현재 사용하고 있는 queryClient 의 정보를 불러온다.

// queryClient.invalidateQueries();
  queryClient.invalidateQueries({ queryKey: ["posts"] });

invalidateQueries 키워드로 해당 queryKey를 주시하게 하면
데이터가 변경됐을 때 기존의 query를 무효화 시키고
새로운 query로 갱신시킨다.

const { mutate: postMutate } = useMutation({
    mutationFn: (comments) => commentsApi.post(comments),
    onSuccess: () => {
      queryClient.invalidateQueries(["posts"]);
    },
  });

useMutation 의 옵션 onSuccess 에 넣어주면 성공했을 때만 refetch 할 수 있다.

결론

공식문서를 보고 공부하라고 하시는 선배 개발자분들이 많다.
정말 좋은데.. 정말 좋은데..
이 용어들에 익숙해지는 것도, 언어의 장벽을 뛰어넘는 것도 개발자의 벽이라고 할 수 있겠다.
처음에 무효화 한다는게 대체 무슨말인가 싶었다.