harsh-harlequin•2y 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•2y 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•2y ago

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

harsh-harlequin•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?

kapa.ai•2y ago

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

kapa.ai•2y 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•2y ago

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

fascinating-indigo•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?

harsh-harlequin•2y ago

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