서버 데이터 관리: TanStack Query

서버 상태를 선언적으로 관리합니다. 캐싱, 재요청, 로딩/에러 상태를 자동으로 처리합니다.

다음은 팀스파르타 FE 챕터에서 Tanstack Query를 사용하는 주된 패턴들입니다.

queryOptions로 쿼리 정의하기

queryOptions로 쿼리 설정을 정의해요. 이를 통해 쿼리의 재사용성을 높입니다.

import { queryOptions } from '@tanstack/react-query';

const productQueryKeys = {
  all: ['products'],
  detail: (id: number) => [...productQueryKeys.all, id],
};

const productQuery = (id: number) =>
  queryOptions({
    queryKey: productQueryKeys.detail(id),
    queryFn: () => fetchProduct(id),
  });

// 사용처
useQuery(productQuery(1));
useSuspenseQuery(productQuery(1));
queryClient.prefetchQuery(productQuery(1));

useSuspenseQuery + Suspense

useSuspenseQuery와 Suspense를 함께 사용하여 data가 항상 존재하는 것이 보장된 상태에서 컴포넌트 로직을 작성합니다.

import { Suspense } from 'react';
import { useSuspenseQuery } from '@tanstack/react-query';

export function Page() {
  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      <Content id={1} />
    </Suspense>
  );
}

function Content({ id }: { id: number }) {
  const { data } = useSuspenseQuery(productQuery(id));

  return <h1>{data.name}</h1>;
}