Update docs related to react-query

[adeelibr]

Is your feature request related to a problem? Please describe.

Currently in the docs https://mswjs.io/docs/faq#react-query the method to clear query cache is outdated with ver3 released.

Describe the solution you'd like

We need to replace

import { queryCache } from 'react-query'
beforeEach(() => {
  queryCache.clear()
})

with

let queryClient: QueryClient;
beforeEach(() => {
  queryClient = new QueryClient();
});
afterEach(() => {
  queryClient.clear();
});

Describe alternatives you've considered

🤔

Additional context

• https://react-query.tanstack.com/guides/migrating-to-react-query-3 (I was just trying to migrate from react-query v2 to v3 & noticed the difference in docs 😄 )

[kettanaito]

Hey, @adeelibr. Thanks for pointing this out.

While keeping that page in sync is rather tedious and it does have a note about the potentially different API at the bottom, I don't mind updating it if it doesn't require much investigation.

Please, should the queryClient be shared between the app and the tests? I wonder where does it come from?

Would this be a sufficient suggestion?

import { QueryClient } from 'react-query'

const client = new QueryClient()

afterEach(() => {
  client.clear()
})

The docs still mention QueryCache and the way to clear it. How is this different than using QueryClient?

[adeelibr]

Hi @kettanaito

This is sufficient as well

import { QueryClient } from 'react-query'

const client = new QueryClient()

afterEach(() => {
  client.clear()
})

Also it can be done with QueryCache as well, queryCache has been deprecated

import { QueryCache } from 'react-query'
 
const queryCache = new QueryCache()

afterEach(() => {
  queryCache.clear()
})

[kettanaito]

@adeelibr would you be interested in shipping a pull request to the website repo? I like the QueryClient option.

[adeelibr]

@adeelibr would you be interested in shipping a pull request to the website repo? I like the QueryClient option.

I will make a PR for it today 👍

[kettanaito]

Fixed by mswjs/mswjs.io#127. The page is now live. Thank you once more. @adeelibr.