64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
|
'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>
|
|||
|
|
);
|
|||
|
|
}
|