데이터 페칭: TanStack Query 실전

// pip install @tanstack/react-query
import { useQuery } from '@tanstack/react-query';

function ProductList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['products'],
    queryFn: async () => {
      const res = await fetch('/api/products');
      if (!res.ok) throw new Error('Failed');
      return res.json();
    },
    staleTime: 1000 * 60 * 5,  // 5분간 fresh
    gcTime: 1000 * 60 * 30,     // 30분 후 GC
  });

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>오류: {(error as Error).message}</div>;

  return (
    <ul>
      {data.map((p: Product) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

import { useMutation, useQueryClient } from '@tanstack/react-query';

function LikeButton({ postId }: { postId: string }) {
  const qc = useQueryClient();

  const { mutate, isPending } = useMutation({
    mutationFn: async ({ postId, liked }: { postId: string; liked: boolean }) => {
      const method = liked ? 'POST' : 'DELETE';
      const res = await fetch(`/api/posts/${postId}/like`, { method });
      if (!res.ok) throw new Error('Failed');
      return res.json();
    },

    // 낙관적 업데이트 — 즉시 UI 변경
    onMutate: async ({ postId, liked }) => {
      await qc.cancelQueries({ queryKey: ['post', postId] });
      const prev = qc.getQueryData(['post', postId]);

      qc.setQueryData(['post', postId], (old: any) => ({
        ...old,
        liked,
        likesCount: old.likesCount + (liked ? 1 : -1),
      }));

      return { prev };
    },

    // 실패 시 롤백
    onError: (err, vars, context) => {
      qc.setQueryData(['post', vars.postId], context?.prev);
    },

    // 성공·실패 모두 후 — 서버 데이터로 동기화
    onSettled: (data, err, vars) => {
      qc.invalidateQueries({ queryKey: ['post', vars.postId] });
    },
  });

  const post = qc.getQueryData<Post>(['post', postId])!;

  return (
    <button
      onClick={() => mutate({ postId, liked: !post.liked })}
      disabled={isPending}
    >
      {post.liked ? '❤️' : '🤍'} {post.likesCount}
    </button>
  );
}

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

function InfinitePostList() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useInfiniteQuery({
    queryKey: ['posts'],
    queryFn: async ({ pageParam = 0 }) => {
      const res = await fetch(`/api/posts?cursor=${pageParam}`);
      return res.json();  // { items: Post[], nextCursor: number | null }
    },
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  });

  return (
    <div>
      {data?.pages.flatMap(page =>
        page.items.map((post: Post) => <PostCard key={post.id} post={post} />)
      )}
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage ? '로드 중...' : hasNextPage ? '더 보기' : '끝'}
      </button>
    </div>
  );
}


// IntersectionObserver로 자동 로드
import { useEffect, useRef } from 'react';

function useInfiniteScroll(callback: () => void) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => entry.isIntersecting && callback(),
      { threshold: 1.0 }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [callback]);

  return ref;
}

// app/providers.tsx
'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60,
      gcTime: 1000 * 60 * 5,
      retry: 1,
      refetchOnWindowFocus: false,  // 모바일 적합
    },
  },
});

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}