What is the best place to instantiate new QueryClient()?

[yinghaochan]

The quick start guide shows this, where the queryClient will never be instantiated more than once while the code is running:

 const queryClient = new QueryClient()
 
 // used to render app and tests
 function App() {
   return (
     // Provide the client to your App
     <QueryClientProvider client={queryClient}>
       <Todos />
     </QueryClientProvider>
   )
 }

 it('one thing', () => {
   render(<App />)
   ...
 })
 
  it('next thing', () => {
  // cached queries from previous test are still here
   render(<App />)
   ...
 })

However, what if your tests render(<App />), where it is ideal, for isolation reasons, to have a new instance of QueryClient for each test?

should we instead instantiate in a hook that only runs once?

function App() {
const queryClient = useMemo(() => new QueryClient(), [])

  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

[TkDodo]

I test my hooks with "@testing-library/react-hooks" and I'm giving a new Provider for every test. Here is an example: https://codesandbox.io/s/react-query-basic-testing-nh6tv?file=/src/app.test.tsx

if you want to test a component, you can also make a thin wrapper:

https://github.com/tannerlinsley/react-query/blob/ead2e5dd5237f3d004b66316b5f36af718286d2d/src/react/tests/utils.tsx#L6-L17

in your example, don't test the App, test the Todos component wrapped with a QueryClient.

should we instead instantiate in a hook that only runs once?

side note: useMemo is not what you want if you want it to only run once. I have an article on that: https://tkdodo.eu/blog/use-state-for-one-time-initializations

[julionav]

Another solution here is to have a global afterEach hook that clears the cache with queryClient.clear()

[yinghaochan]

We render the full app instead of a component most of the time because it is closer to how it's used, and will ultimately have less false negatives where tests pass but it's actually broken when used in a browser.

 export function renderWithClient(client: QueryClient, ui: React.ReactElement) { 
   client = client || new QueryClient()
   const { rerender, ...result } = render( 
     <QueryClientProvider client={client}>{ui}</QueryClientProvider> 
   ) 
   return { ...   } 
 } 

I've settled on this pattern, thanks everyone!

@julionav ty. I considered this situation, but since the client will still sorta be shared between tests, ultimately decided against it although it should work fine.

also @TkDodo that blog post was super useful. I saw that warning in the docs for useMemo as well but they didn't suggest a better way, like you did.

[TkDodo]

Glad you liked it 😊