QueryClient - invalidateQueries

QueryClient

서버 데이터를 효율적으로 캐시하고, 공유하고, 갱신할 수 있도록 도와줌

역할

• 캐시 저장소 : 서버에서 가져온 데이터를 메모리에 저장하고, 여러 컴포넌트 간에 공유
• 요청 중복 제거 : 같은 데이터를 여러 컴포넌트에서 요청해도 하나의 요청으로 처리
• 자동 리패치 : 포커스 전환 시나 데이터 변경 시 자동으로 데이터를 새로 가져옴

예시

// index.tsx

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

root.render (
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
    	<App />
    </QueryClientProvider>
  </React.StrictMode>
)

// 사용 예시
import { useMutation, useQueryClient } from "@tanstack/react-query";

export const useUnfollowPlaylist = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (params: UnfollowPlaylistRequest) => {
      return UnfollowPlaylist(params);
     },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["current-user-playlists"] });
      window.location.replace("/");
    },
  });
};

---

queryClient.invalidateQueries

---

await queryClient.invalidateQueries(
  {
    queryKey: ['posts'],
    exact,
    refetchType: 'active',
  },
  { throwOnError, cancelRefetch },
)

• 캐시에 있는 하나 또는 여러 쿼리를 무효화하고 다시 가져오는데 사용

queryClient.invalidateQueries({ queryKey: ["current-user-playlists"] });

• current-user-playlists의 queryKey를 가지고 있는 쿼리를 무효화 시키고 캐싱되어 있던 데이터 대신 새로운 데이터를 서버에 요청