React Query context issue with custom hooks
Hello, I am having a very weird issue with the React Query (now TanStack) Client with Refine. I am trying to leverage the same QueryClient set up by the Refine App context wrapper, so I can call my hooks similar to the
useCreate
and useList
hooks. However, my custom hooks cannot see the context created by the Refine App context wrapper. Whenever the pages render (I am using Next.js routing), the refine hooks work jsut fine but my custom hooks get the following error:
Is there something specific I must do to have access to the QueryClient provided by Refine? I dont want to have 2 ReactQuery clients in my app if I can help it. Thanks.8 Replies
Hi @bombillazo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Refine uses React Query internally and provides a default configuration for the QueryClient. To access the same QueryClient used by Refine, you can use the
useQueryClient
hook from the @tanstack/react-query
library.
Here's an example of how to access the QueryClient provided by Refine:
However, if you still face issues with your custom hooks, you can try configuring the QueryClient explicitly in your Refine app and pass it to both Refine and your custom hooks. Here's an example of how to do that:
Now you can use the same queryClient
instance in your custom hooks.
For more information on configuring the QueryClient in Refine, refer to this extract: api-reference > core > components > refine-config > <Refine> > options
> reactQuery
> clientConfig
(https://refine.dev/docs/api-reference/core/components/refine-config).
If you still face issues, please ensure that your custom hooks are used within the Refine context, as it's required for them to access the QueryClient provided by Refine.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@260960777010151436> kapa.ai is still learning and improving, please let us how it did by reacting below
conscious-sapphire•2y ago
I will try passing a custom client to see if it works...
@kapa.ai That did not work, I still get the same error. Is there any setup required to access the same React Query instance using hooks?
Let me check the knowledge base for you. One moment! :books:
----------------------
Hmm, I don't know enough to give you a confident answer yet. However, I recommend checking the Refine documentation (https://refine.dev/docs) for more information on how to work with React Query and Refine together.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------Overview | refine
What is refine?
<@260960777010151436> kapa.ai is still learning and improving, please let us how it did by reacting below
extended-salmon•2y ago
Hey @bombillazo,
Just try
useQueryClient
, this will return the queryClient
that refine uses. Also, the bot's answer seems to be correct.
Are you sure you are calling the custom hook on the components that <Refine>
wraps?conscious-sapphire•2y ago
Yes. The issue was related to Next.js transpiling though. I found a solution in github issues. Thanks for the help.