TanStackT
TanStack•4y ago•
15 replies
efficient-indigo

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>
  )
}

if we declare outside the app its functionally equivalent?
const queryClient = new QueryClient()


export default function App() {

  return (

    <QueryClientProvider client={queryClient}>

      <Example />

    </QueryClientProvider>

  )

}

just wanted to double check my understanding
Was this page helpful?