Skip to content

Commit

Permalink
docs: not using useState in creating queryClient when use ReactQueryS…
Browse files Browse the repository at this point in the history
…treamedHydration in suspense-example (#7431)
  • Loading branch information
poiu694 authored May 15, 2024
1 parent 10c7527 commit 3a9e046
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 12 deletions.
34 changes: 33 additions & 1 deletion docs/framework/react/guides/suspense.md
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,40 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import * as React from 'react'
import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'

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 (typeof window === 'undefined') {
// 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
// supsends 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 function Providers(props: { children: React.ReactNode }) {
const [queryClient] = React.useState(() => new QueryClient())
// 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}>
Expand Down
33 changes: 22 additions & 11 deletions examples/react/nextjs-suspense-streaming/src/app/providers.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,33 @@
// app/providers.jsx
'use client'

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import * as React from 'react'
import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'

function makeQueryClient() {
return new QueryClient({
defaultOptions: {
queries: {
staleTime: 60 * 1000,
},
},
})
}

let browserQueryClient: QueryClient | undefined = undefined

function getQueryClient() {
if (typeof window === 'undefined') {
return makeQueryClient()
} else {
if (!browserQueryClient) browserQueryClient = makeQueryClient()
return browserQueryClient
}
}

export function Providers(props: { children: React.ReactNode }) {
const [queryClient] = React.useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
staleTime: 5 * 1000,
},
},
}),
)
const queryClient = getQueryClient()

return (
<QueryClientProvider client={queryClient}>
Expand Down

0 comments on commit 3a9e046

Please sign in to comment.