[기능] TanStack Query로 서버 상태 관리 : useQuery + invalidateQueries로 깔끔한 리패치

짜장킴·2025년 10월 16일

프로젝트

목록 보기

34/38

TanStack Query란?

서버 상태(Server State)를 효율적으로 관리하기 위한 라이브러리
기존의 React Query가 발전해 이제는 React/Vue/Svelte/Solid 등 멀티 프레임워크를 지원하는 통합 패키지

npm install @tanstack/react-query

useQuery - 기본 데이터 패칭 훅

서버에서 데이터를 가져오고, 캐싱하며, 상태를 자동으로 관리해주는 핵심 훅
즉,queryKey로 캐싱하고, 필요할 때 자동 리패치하는 데이터 훅

주요 특징

Key 기반 캐싱 : queryKey를 기준으로 데이터 캐싱 및 공유
자동 상태 관리 : isLoading, isError, data, refetch 등을 제공
리패치 제어 : refetchOnWindowFocus, enabled, staleTime 등으로 제어 가능
서버 렌더링 지원 : SSR / ISR 환경에서도 완벽히 호환

단순 리스트 조회 예시

queryKey 지정

import { getMyActivitiesList } from "@/lib/api/myActivities";
import { useQuery } from "@tanstack/react-query";

export const QK_MY_ACTIVITIES = ["MyActivities"] as const;

type useMyActivitiesListProps = {
  size?: number;
};

export function useMyActivitiesList({ size = 8 }: useMyActivitiesListProps) {
  return useQuery({
    queryKey: QK_MY_ACTIVITIES,
    queryFn: () => getMyActivitiesList({ size }),
    refetchOnWindowFocus: false,
  });
}

invalidateQueries - key 기반 캐시 무효화(리패치 트리거)

데이터가 변경되었을 때(등록, 수정, 삭제 등) 해당 데이터의 queryKey를 무효화(invalidate) 하면 TanStack Query가 자동으로 해당 데이터를 리패치함

삭제 후 자동 리패치

queryKey로 리패치

import { deleteMyActivities } from "@/lib/api/myActivities";
import { extractErrorMessage } from "@/lib/utils/ErrorMessage";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "react-toastify";
import { QK_MY_ACTIVITIES } from "./useMyActivitiesList";

export function useDeleteMyActivities() {
  const qc = useQueryClient();

  return useMutation({
    mutationFn: deleteMyActivities,
    onSuccess: () => {
      toast.success("체험이 삭제되었습니다.");
      // ✅ 캐시 무효화 → 자동 리패치
      qc.invalidateQueries({ queryKey: QK_MY_ACTIVITIES });
    },
    onError: (error) => toast.error(extractErrorMessage(error)),
  });
}