TanStack Query

1// ❌ 기존 코드의 문제점
2 
3// 문제 1: 모듈 레벨에서 호출
4export const queryClient = getQueryClient();
5// → 서버에서 이 모듈이 import될 때마다 실행됨
6 
7// 문제 2: Provider props에서 직접 호출
8<QueryClientProvider client={getQueryClient()}>
9// → 매 렌더링마다 호출될 수 있음

1// ✅ 올바른 패턴 (Next.js App Router)
2 
3'use client';
4import { useState } from 'react';
5import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
6 
7function makeQueryClient() {
8  return new QueryClient({ /* 옵션 */ });
9}
10 
11let browserQueryClient: QueryClient | undefined;
12 
13function getQueryClient() {
14  if (typeof window === 'undefined') {
15    // 서버: 항상 새로 생성 (요청 격리)
16    return makeQueryClient();
17  }
18  // 클라이언트: 싱글톤
19  if (!browserQueryClient) {
20    browserQueryClient = makeQueryClient();
21  }
22  return browserQueryClient;
23}
24 
25export default function QueryProvider({ children }) {
26  // useState 초기화 함수로 전달 → 마운트 시 1회만 실행
27  const [queryClient] = useState(getQueryClient);
28 
29  return (
30    <QueryClientProvider client={queryClient}>
31      {children}
32    </QueryClientProvider>
33  );
34}