auto-trade/providers/query-provider.tsx

"use client";

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

const ReactQueryDevtools = dynamic(
  () =>
    import("@tanstack/react-query-devtools").then(
      (mod) => mod.ReactQueryDevtools,
    ),
  { ssr: false },
);

/**
 * [React Query Provider]
 *
 * 애플리케이션 전역에 React Query 기능을 제공합니다.
 * - 서버 상태 관리
 * - 자동 캐싱 및 재검증
 * - 로딩/에러 상태 관리
 * - DevTools 통합 (개발 환경)
 *
 * @see https://tanstack.com/query/latest
 */
export function QueryProvider({ children }: { children: React.ReactNode }) {
  // ========== QueryClient 생성 ==========
  // useState로 감싸서 리렌더링 시에도 동일한 인스턴스 유지
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            // ========== 쿼리 기본 옵션 ==========
            staleTime: 60 * 1000, // 1분 - 데이터가 신선한 것으로 간주되는 시간
            gcTime: 5 * 60 * 1000, // 5분 - 캐시 유지 시간 (이전 cacheTime)
            retry: 1, // 실패 시 재시도 횟수
            refetchOnWindowFocus: false, // 윈도우 포커스 시 자동 재검증 비활성화
          },
          mutations: {
            // ========== Mutation 기본 옵션 ==========
            retry: 0, // Mutation은 재시도하지 않음
          },
        },
      }),
  );

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      {/* ========== DevTools (개발 환경에서만 표시) ========== */}
      {process.env.NODE_ENV === "development" ? (
        <ReactQueryDevtools initialIsOpen={false} position="bottom" />
      ) : null}
    </QueryClientProvider>
  );
}