like-gold•16mo ago

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:

Error: No QueryClient set, use QueryClientProvider to set one

Error: No QueryClient set, use QueryClientProvider to set one

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

kapa.ai•16mo ago

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:

import { useQueryClient } from "@tanstack/react-query";

const queryClient = useQueryClient();

import { useQueryClient } from "@tanstack/react-query";

const queryClient = useQueryClient();

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:

import { QueryClient } from "@tanstack/react-query";
import { Refine } from "@refinedev/core";
// ... other imports

const queryClient = new QueryClient();

const App: React.FC = () => (
  <Refine
    // ...
    options={{
      reactQuery: {
        clientConfig: queryClient,
      },
    }}
  />
);

import { QueryClient } from "@tanstack/react-query";
import { Refine } from "@refinedev/core";
// ... other imports

const queryClient = new QueryClient();

const App: React.FC = () => (
  <Refine
    // ...
    options={{
      reactQuery: {
        clientConfig: queryClient,
      },
    }}
  />
);

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: ----------------------

kapa.ai•16mo ago

<@260960777010151436> kapa.ai is still learning and improving, please let us how it did by reacting below

like-gold•16mo 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?

kapa.ai•16mo ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•16mo ago

---------------------- 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?

kapa.ai•16mo ago

<@260960777010151436> kapa.ai is still learning and improving, please let us how it did by reacting below

like-gold•16mo 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?

like-gold•16mo ago

Yes. The issue was related to Next.js transpiling though. I found a solution in github issues. Thanks for the help.