Skip to content

Commit

Permalink
feat: update react query provider to be in-line with docs
Browse files Browse the repository at this point in the history
agrattan0820 committed Jul 26, 2024
1 parent 1a46d0d commit 85e9a6e
Showing 1 changed file with 39 additions and 2 deletions.
41 changes: 39 additions & 2 deletions apps/client/src/utils/query-provider.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,51 @@
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// Since QueryClientProvider relies on useContext under the hood, we have to put 'use client' on top
import {
isServer,
QueryClient,
QueryClientProvider,
} from "@tanstack/react-query";

const queryClient = new QueryClient();
function makeQueryClient() {
return new QueryClient({
defaultOptions: {
queries: {
// With SSR, we usually want to set some default staleTime
// above 0 to avoid refetching immediately on the client
staleTime: 60 * 1000,
},
},
});
}

let browserQueryClient: QueryClient | undefined = undefined;

function getQueryClient() {
if (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 QueryProvider({
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}</QueryClientProvider>
);

0 comments on commit 85e9a6e

Please sign in to comment.