correct-apricot
correct-apricot5mo 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
kapa.ai5mo 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
kapa.ai5mo ago
<@1193948848058552352> kapa.ai is still learning and improving, please let us know how it did by reacting below
correct-apricot
correct-apricot5mo 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 ??