[BUG] Unable to clear custom query client cache

[rawadnasr]

Describe the bug

I implemented a custom query client in my refine application trying to clear react query cache when I switch from a user to another on sign out.
I extracted query client from useQueryClient hook and i called the queryClient.clear() but it didn't work at all with no errors or feedback.

Steps To Reproduce

1. install react-query library
2. create queryClient instance from react-query
3. wrap refine tag with query client provider and update the options in refine

<QueryClientProvider client={queryClient}>
<Refine options={{
reactQuery: {
clientConfig: queryClient
}
}}>
</Refine>
</QueryClientProvider>

5. useQueryClient in any component to get the queryClient instance.
6. create a button and call queryClient.clear()
7. cache is not cleared

Expected behavior

queryClient.clear() should clear react query cache

Screenshot

No response

Desktop

List of packages:
"@ant-design/icons": "^5.0.1",
"@refinedev/antd": "^5.37.2",
"@refinedev/cli": "^2.7.4",
"@refinedev/core": "^4.32.0",
"@refinedev/devtools": "^1.1.30",
"@refinedev/inferencer": "^4.5.17",
"@refinedev/kbar": "^1.3.5",
"@refinedev/nextjs-router": "^5.5.5",
"@refinedev/simple-rest": "^5.0.1",
"@refinedev/supabase": "^5.7.5",
"@supabase/supabase-js": "^2.7.0",
"@tanstack/react-query": "^5.17.9",
"@tinymce/tinymce-react": "^4.3.0",
"antd": "5.8.1",
"antd-img-crop": "^4.18.0",
"clipboard-polyfill": "^2.8.5",
"next": "^13.5.1",
"nextjs-cors": "^2.1.2",
"nookies": "^2.5.2",
"react": "^18.0.0",
"react-animated-css": "^1.2.1",
"react-dom": "^18.0.0",
"react-markdown": "^9.0.1",
"react-phone-input-2": "^2.15.1",
"react-transition-group": "^4.4.5",
"sass": "^1.64.2",
"supertokens-auth-react": "^0.35.4",
"supertokens-web-js": "^0.8.0",
"tinymce": "^6.7.0",
"tus-js-client": "^3.1.1"

browser: chrome

Mobile

No response

Additional Context

No response

[alicanerdurmaz]

Hello @rawadnasr, can you provide us a reproducible example?

You can use this codesandbox or repo as a base.

[rawadnasr]

Hello @alicanerdurmaz, I used codesandox as a base. Kindly find the reproduced example.
Refine devtools is not working for me ( we can detect from there if cache is cleared or not if it worked ) in the example but I showed the case in the console, I printed the data showing that it's not cleared .
I added a button in the posts listing to clear the react query cache.

[alicanerdurmaz]

@rawadnasr Thanks, I will debug and return you

[alicanerdurmaz]

@rawadnasr Hello again, Thanks for the detailed explanation.

Refine is currently compatible with the "@tanstack/react-query@4x" version. You used @5.
I downgraded to @4 and observed that it works fine.

We have an update to @5 in our backlog, but I can't give a deadline for it right now. You can open an Issue if you want to speed things up.

Also, you don't need a new query <QueryClientProvider /> or a new QueryClient. you can directly use useQueryClient without this boilerplate. If you want to create your own QueryClient, please don't wrap it with <QueryClientProvider />. Refine already wraps the project with <QueryClientProvider />, which may produce bugs.

please let me know if the problem still persists after downgrading to version @4

[rawadnasr]

@alicanerdurmaz Hello, thank you for the support.
I installed @tanstack/react-query version 4.36.1.
I tried to remove <QueryClientProvider/>, but I faced this issue Error: No QueryClient set, use QueryClientProvider to set one when i used useQueryClient inside the application, it can't be imported from refine so I needed to install react query to achieve this. In additional to that I also tried with the <QueryClientProvider/> but I couldn't clear the query cache. Does refine provide a solution to clear cache instead of installing react query and clearing it the way we already implemented?? what is the exact version that you installed and worked for you? and how you are using useQueryClient without wrapping the application with <QueryClientProvider/>??

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.