Refine•15mo ago

Problem with linking the queryclient being used in refine's hooks and custom hooks

I am trying to wrap Refine with my own controlled queryClient but it doesn't work refine still working separately that i cant catch any query, mutation in tanstack dev tool

App.tsx2.29KB

index.tsx917B

kapa.ai•10/14/24, 4:03 AM

Hi @Belvis. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•10/14/24, 4:03 AM

----------------------
It seems like you're trying to integrate a custom

QueryClient

QueryClient

with Refine, but are facing issues with it not being recognized in the TanStack DevTools. Based on the information from the knowledge sources, here are some steps and considerations that might help resolve the issue:

Using a Custom QueryClient: Refine allows you to use your own
```
QueryClient
```
```
QueryClient
```
. You can pass your custom
```
QueryClient
```
```
QueryClient
```
instance to Refine through the
```
clientConfig
```
```
clientConfig
```
option. Here's an example of how you can do this:

    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,
          },
        }}
      />
    );

Source (https://refine.dev/docs/core/refine-component/#reactquery)

**Avoid Wrapping with QueryClientProvider**: Refine already wraps your application with a `QueryClientProvider`, so you should not wrap it again. Doing so might cause conflicts or unexpected behavior, as mentioned in the issues:
- "You don't need a new <QueryClientProvider /><QueryClientProvider /> or a new
```
QueryClient
```
```
QueryClient
```
  . You can directly use
```
useQueryClient
```
```
useQueryClient
```
  without this boilerplate." Source (https://github.com/refinedev/refine/issues/5499)
**Version Compatibility**: Ensure that you are using a compatible version of `@tanstack/react-query`. There have been issues reported when using version 5.x with Refine, which is currently compatible with version 4.x. Consider downgrading if you are using version 5.x:
- "Refine is currently compatible with the @tanstack/react-query@4x@tanstack/react-query@4x version." Source (https://github.com/refinedev/refine/issues/5499)

kapa.ai•10/14/24, 4:03 AM

Debugging: If you are still facing issues, try to create a minimal reproducible example and check if the problem persists. This can help in isolating the issue and understanding if it's related to the setup or something else.

If these steps do not resolve your issue, you might want to check the Refine documentation (https://refine.dev/docs/) for more detailed guidance or consider reaching out to the community for further assistance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•10/14/24, 4:03 AM

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

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