conscious-sapphire•15mo ago

Error: No QueryClient set, use QueryClientProvider to set one

@kapa.ai I am using useGetIdentity, to fetch info in the app.tsx file where refine component is implemented. useGetIdentity works well in other components but here it is giving me error Uncaught Error: No QueryClient set, use QueryClientProvider to set one

10 Replies

kapa.ai•15mo ago

Hi @jenish7822. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're encountering an issue with the QueryClient when using useGetIdentity in your App.tsx file. The error message suggests that there is no QueryClient set, and you should use QueryClientProvider to set one. Refine uses React Query under the hood, and it sets up the QueryClient for you when you use the <Refine> component. However, if you're trying to use useGetIdentity outside of the <Refine> component's scope, you might encounter this error. To fix this issue, you can either: 1. Move the usage of useGetIdentity to a component that is a child of the <Refine> component. 2. Set up your own QueryClient and wrap your App.tsx with QueryClientProvider. Here's an example of setting up your own QueryClient and using QueryClientProvider:

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

const App: React.FC = () => (
  <QueryClientProvider client={queryClient}>
    {/* Your app components and <Refine> component */}
  </QueryClientProvider>
);

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

const App: React.FC = () => (
  <QueryClientProvider client={queryClient}>
    {/* Your app components and <Refine> component */}
  </QueryClientProvider>
);

Keep in mind that if you set up your own QueryClient, you should also pass it to the <Refine> component as shown in the Refine documentation (https://refine.dev/docs/api-reference/core/components/refine-config):

import { QueryClient } from "react-query";

const queryClient = new QueryClient();

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

import { QueryClient } from "react-query";

const queryClient = new QueryClient();

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

Remember to use useGetIdentity within a component that is a child of the <Refine> component or the QueryClientProvider. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

conscious-sapphire•15mo ago

@kapa.ai Type 'QueryClient' is not assignable to type 'QueryClientConfig | QueryClient | undefined'. Type 'QueryClient' is missing the following properties from type 'QueryClient': logger, mountCount, ensureQueryData, getLogger

kapa.ai•15mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Apologies for the confusion in my previous response. It seems there was a mistake in the example provided. You should pass the clientConfig property inside the reactQuery object in the options prop of the <Refine> component. Here's the correct way to do it:

import { QueryClient } from "react-query";

const queryClient = new QueryClient();

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

import { QueryClient } from "react-query";

const queryClient = new QueryClient();

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

This should resolve the type error you're encountering. Make sure to use useGetIdentity within a component that is a child of the <Refine> component. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

conscious-sapphire•15mo ago

@kapa.ai Type '{ clientConfig: { defaultOptions: { queries: { staleTime: number; }; }; }; queryClient: QueryClient; }' is not assignable to type '{ clientConfig?: QueryClientConfig | QueryClient | undefined; devtoolConfig?: false | DevtoolsOptions | undefined; }'. Object literal may only specify known properties, and 'queryClient' does not exist in type '{ clientConfig?: QueryClientConfig | QueryClient | undefined; devtoolConfig?: false | DevtoolsOptions | undefined; }'.

kapa.ai•15mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Apologies for the confusion in my previous response. It seems there was another mistake in the example provided. You should pass the QueryClient instance directly to the clientConfig property inside the reactQuery object in the options prop of the <Refine> component. Here's the correct way to do it:

import { QueryClient } from "react-query";

const queryClient = new QueryClient();

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

import { QueryClient } from "react-query";

const queryClient = new QueryClient();

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

kapa.ai•15mo ago

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

correct-apricot•15mo ago

You cannot use useGetIdentity inside app.tsx because queryClient inside refine component. it's a react's nature. To access react context, you need to call from child component.

conscious-sapphire•15mo ago

thanks for the update.