crude-lavender•7mo ago

import queryClient instance from refine

Hello, Is it possible to import react queryClient instance from Refine directly instead of installing react-query and configuring it in the application ???

3 Replies

kapa.ai•7mo ago

Hi @rawad_94037. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- No, it's not possible to import the QueryClient instance directly from Refine. As per the migration guide (https://refine.dev/docs/migration-guide/3x-to-4x#import-changes), all @tanstack/react-query imports that were re-exported from @refinedev/core have been removed. You now need to import them from the @tanstack/react-query package directly. Here's how you can install it with your package manager:

npm install @tanstack/react-query

npm install @tanstack/react-query

After that, you can import QueryClient from @tanstack/react-query package directly instead of @refinedev/core package.

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

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

However, you can pass your own QueryClient instance to Refine's configuration. Here's an example:

import { QueryClient } from "@tanstack/react-query";  
  
const myQueryClient = new QueryClient();  
  
const App = () => (  
 <Refine  
 options={{  
 reactQuery: {  
 clientConfig: myQueryClient,  
 },  
 }}  
 />  
);

import { QueryClient } from "@tanstack/react-query";  
  
const myQueryClient = new QueryClient();  
  
const App = () => (  
 <Refine  
 options={{  
 reactQuery: {  
 clientConfig: myQueryClient,  
 },  
 }}  
 />  
);

This feature was implemented in response to a Github issue (https://github.com/refinedev/refine/issues/2665) and allows you to share the QueryClient instance with other parts of the application, even other frameworks. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

crude-lavender•7mo ago

i tried to implement this: const queryClient = useQueryClient() but an error arise that states: No QueryClient set, use QueryClientProvider to set one. There is already a provider in refine implementation. Do I need to set another one ??