flat-fuchsia

query client declaration

Noticed in the docs we put the query client in the app and use useState to create referential stability

// root.tsx
import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query'

import { useDehydratedState } from 'use-dehydrated-state'

export default function MyApp() {
  const [queryClient] = React.useState(() => new QueryClient())

  const dehydratedState = useDehydratedState()

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={dehydratedState}>
        <Outlet />
      </Hydrate>
    </QueryClientProvider>
  )
}

// root.tsx
import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query'

import { useDehydratedState } from 'use-dehydrated-state'

export default function MyApp() {
  const [queryClient] = React.useState(() => new QueryClient())

  const dehydratedState = useDehydratedState()

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={dehydratedState}>
        <Outlet />
      </Hydrate>
    </QueryClientProvider>
  )
}

if we declare outside the app its functionally equivalent?

const queryClient = new QueryClient()


export default function App() {

  return (

    <QueryClientProvider client={queryClient}>

      <Example />

    </QueryClientProvider>

  )

}

const queryClient = new QueryClient()


export default function App() {

  return (

    <QueryClientProvider client={queryClient}>

      <Example />

    </QueryClientProvider>

  )

}

just wanted to double check my understanding

8 Replies

optimistic-gold•3y ago

Depends. If you use something like nextJs, it's not the same because the outside declaration would share the client on the server between requests (of different users)

flat-fuchsiaOP•3y ago

Yep. Using nextjs. Interesting so if I want ssr and dehydration I need to declare inside of app? Can you explain "outside deceleration would share the client on the server between requests (of different users)? Anyway of testing both and seeing how it works to get a better understanding? So declaring outside then server side props gets access to the same query client?

optimistic-gold•3y ago

Your app is rendered on the server for all users. If you create a queryClient outside of the app component, it is created once for the lifetime of your server. This is documented here: https://tanstack.com/query/v4/docs/react/guides/ssr#using-hydration

SSR | TanStack Query Docs

React Query supports two ways of prefetching data on the server and passing that to the queryClient. Prefetch the data yourself and pass it in as initialData

optimistic-gold•3y ago

Create a new QueryClient instance inside of your app, and on an instance ref (or in React state). This ensures that data is not shared between different users and requests, while still only creating the QueryClient once per component lifecycle.

flat-fuchsiaOP•3y ago

Ah so everything inside App is on every request whereas anything outside is static for the whole session lifetime? Ah.. I think I get it. The query client data is shared on the server and is the same for all users? Inside App it's per session/request?

optimistic-gold•3y ago

yes

flat-fuchsiaOP•3y ago

thanks so much! currently working on an app on a. new project that has the queryClient defined outside (next app using Hydrate/dehydration) i suppose issues wouldn't show until its tested with different users hitting the same session which i think QA haven't tested how could i demonstrate that? Would anything show in devtools? would there be strange caching issues?

optimistic-gold•3y ago

yeah I think data would be shared between users. haven't tried that yet tbh

Gaming

Programming

query client declaration

Did you find this page helpful?