64 lines
1.6 KiB
TypeScript
Executable File
64 lines
1.6 KiB
TypeScript
Executable File
'use client';
|
||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||
import { loggerLink, httpBatchLink, createTRPCClient } from '@trpc/client';
|
||
import { TRPCProvider } from '@fenghuo/client';
|
||
import { useMemo, useState } from 'react';
|
||
import superjson from 'superjson';
|
||
import type { AppRouter } from '@fenghuo/api/trpc';
|
||
import { useToken } from '@/components/providers/token-provider';
|
||
|
||
interface QueryProviderProps {
|
||
children: React.ReactNode;
|
||
}
|
||
|
||
export default function QueryProvider({ children }: QueryProviderProps) {
|
||
// 使用token hook，自动响应token变化
|
||
const { accessToken } = useToken();
|
||
|
||
const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
|
||
|
||
const [queryClient] = useState(
|
||
() =>
|
||
new QueryClient({
|
||
defaultOptions: {
|
||
queries: {
|
||
staleTime: 1000 * 60 * 5,
|
||
retry: 3,
|
||
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
|
||
refetchOnWindowFocus: false,
|
||
},
|
||
},
|
||
}),
|
||
);
|
||
|
||
const trpcClient = useMemo(() => {
|
||
const headers = async () => ({
|
||
...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
|
||
});
|
||
|
||
const links = [
|
||
httpBatchLink({
|
||
url: `${apiUrl}/trpc`,
|
||
headers,
|
||
transformer: superjson,
|
||
}),
|
||
loggerLink({
|
||
enabled: (opts) =>
|
||
process.env.NODE_ENV === 'development' || (opts.direction === 'down' && opts.result instanceof Error),
|
||
}),
|
||
];
|
||
|
||
return createTRPCClient<AppRouter>({
|
||
links,
|
||
});
|
||
}, [accessToken, apiUrl]);
|
||
|
||
return (
|
||
<QueryClientProvider client={queryClient}>
|
||
<TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
|
||
{children}
|
||
</TRPCProvider>
|
||
</QueryClientProvider>
|
||
);
|
||
}
|