40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
// In Next.js, this file would be called: app/providers.tsx
|
|
'use client'
|
|
|
|
// Since QueryClientProvider relies on useContext under the hood, we have to put 'use client' on top
|
|
import { QueryClientProvider, environmentManager } from '@tanstack/react-query'
|
|
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
|
|
import type { QueryClient } from '@tanstack/react-query'
|
|
import { makeQueryClient } from '@/app/make-query-client'
|
|
|
|
let browserQueryClient: QueryClient | undefined = undefined
|
|
|
|
function getQueryClient() {
|
|
if (environmentManager.isServer()) {
|
|
// Server: always make a new query client
|
|
return makeQueryClient()
|
|
} else {
|
|
// Browser: make a new query client if we don't already have one
|
|
// This is very important, so we don't re-make a new client if React
|
|
// suspends during the initial render. This may not be needed if we
|
|
// have a suspense boundary BELOW the creation of the query client
|
|
if (!browserQueryClient) browserQueryClient = makeQueryClient()
|
|
return browserQueryClient
|
|
}
|
|
}
|
|
|
|
export default function Providers({ children }: { children: React.ReactNode }) {
|
|
// NOTE: Avoid useState when initializing the query client if you don't
|
|
// have a suspense boundary between this and the code that may
|
|
// suspend because React will throw away the client on the initial
|
|
// render if it suspends and there is no boundary
|
|
const queryClient = getQueryClient()
|
|
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
{children}
|
|
<ReactQueryDevtools />
|
|
</QueryClientProvider>
|
|
)
|
|
}
|