The 'QueryClient' type does not have queryCache, mutationCache, defaultOptions, queryDefaults and four other properties of the 'QueryClient' type.

[stoicjone]

What you were expecting:

To set React Query's staleTime, I created a QueryClient instance, set defaultOptions.queries.staleTime, and passed it to the queryClient props in the Admin component as described in the official documentation.
I expected it to work the same as passing it to QueryClientProvider, but I get an error message saying a required property is missing.

What happened instead:

I get the following error message: The 'QueryClient' type does not have queryCache, mutationCache, defaultOptions, queryDefaults and four other properties of the 'QueryClient' type.

Related code:

import { Admin } from 'react-admin';
import { QueryClient } from 'react-query';
import { dataProvider } from 'providers/dataProvider';

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: 1000 * 6 * 5,
            refetchOnWindowFocus: false,
        },
    },
});

const App = () => (
    <Admin queryClient={queryClient} dataProvider={dataProvider}>
        ...
    </Admin>
);

The 'QueryClient' type does not have queryCache, mutationCache, defaultOptions, queryDefaults and four other properties of the 'QueryClient' type.

Environment

• React-admin version: 4.16.11
• React-query version: 5.20.5 (@tanstack/react-query)
• React version: 18.2.0
• Browser: 121.0.6167.185 (Chrome)

I don't know if this is basic behavior or if I'm missing something. I couldn't find any related documents or content either.

[Nela62]

I ran this code locally and I'm not getting any errors. My Chrome version is different from yours but I'm not getting this error in Firefox either. Do you still get queryClient error if you run this code in a new React project?

import { Admin } from "react-admin";
import { QueryClient } from "react-query";
import fakeDataProvider from "ra-data-fakerest";

const dataProvider = fakeDataProvider({
  posts: [
    { id: 0, title: "Hello, world!" },
    { id: 1, title: "FooBar" },
  ],
  comments: [
    { id: 0, post_id: 0, author: "John Doe", body: "Sensational!" },
    { id: 1, post_id: 0, author: "Jane Doe", body: "I agree" },
  ],
});

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 6 * 5,
      refetchOnWindowFocus: false,
    },
  },
});

const App = () => (
  <Admin queryClient={queryClient} dataProvider={dataProvider}></Admin>
);

export default App;

Environment

• React-admin: 4.16.11
• React: 18.2.0
• Browser: 122.0.6261.69 (Chrome)

[stoicjone]

@Nela62 If you look at the 'Environment' part of the issue I published, you can see that I am using the latest version, @tanstack/react-query v5. You are importing QueryClient from react-query, but I am importing it from @tanstack/react-query. As far as I know, react-query is version 3, and @tanstack/react-query is currently version 5. I understand that React-admin recently migrated react-query to v5. Is this correct? #9462

After creating a new project, I installed React-query(older version) and passed queryClient, but no error occurred. However, if I pass queryClient from @tanstack/react-query, I still get an error. Since it has been migrated to v5, I think it is right to import QueryClient from the latest version. Do I need to set all properties one by one? No related documentation found.

[fzaninotto]

react-admin uses react-query v3. We're working on integrating tanstack query in next, but this isn't released yet (it will be in react-admin v5).

I'm closing this issue because there is nothing wrong with react-admin in this case: you must use react-query v3.