73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import React, { useRef, useState } from 'react';
|
|
import { api } from '@/app/_trpc/client';
|
|
import { Toaster } from '@/components/ui/toaster';
|
|
import { TooltipProvider } from '@/components/ui/tooltip';
|
|
import { ModalProvider } from '@/modals';
|
|
import type { AppStore } from '@/redux';
|
|
import makeStore from '@/redux';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { httpBatchLink } from '@trpc/client';
|
|
import type { Session } from 'next-auth';
|
|
import { SessionProvider } from 'next-auth/react';
|
|
import type { RequestCookie } from 'next/dist/compiled/@edge-runtime/cookies';
|
|
import { Provider as ReduxProvider } from 'react-redux';
|
|
import superjson from 'superjson';
|
|
|
|
import { CookieProvider } from './cookie-provider';
|
|
|
|
export default function Providers({
|
|
children,
|
|
session,
|
|
cookies,
|
|
}: {
|
|
children: React.ReactNode;
|
|
session: Session | null;
|
|
cookies: RequestCookie[];
|
|
}) {
|
|
const [queryClient] = useState(
|
|
() =>
|
|
new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
refetchOnMount: true,
|
|
refetchOnWindowFocus: false,
|
|
},
|
|
},
|
|
})
|
|
);
|
|
const [trpcClient] = useState(() =>
|
|
api.createClient({
|
|
transformer: superjson,
|
|
links: [
|
|
httpBatchLink({
|
|
url: 'http://localhost:3000/api/trpc',
|
|
}),
|
|
],
|
|
})
|
|
);
|
|
|
|
const storeRef = useRef<AppStore>();
|
|
if (!storeRef.current) {
|
|
// Create the store instance the first time this renders
|
|
storeRef.current = makeStore();
|
|
}
|
|
|
|
return (
|
|
<SessionProvider session={session}>
|
|
<ReduxProvider store={storeRef.current}>
|
|
<api.Provider client={trpcClient} queryClient={queryClient}>
|
|
<QueryClientProvider client={queryClient}>
|
|
<TooltipProvider delayDuration={200}>
|
|
<CookieProvider value={cookies}>{children}</CookieProvider>
|
|
<Toaster />
|
|
<ModalProvider />
|
|
</TooltipProvider>
|
|
</QueryClientProvider>
|
|
</api.Provider>
|
|
</ReduxProvider>
|
|
</SessionProvider>
|
|
);
|
|
}
|