[openapi-react-query] Uncaught Error: No QueryClient set, use QueryClientProvider to set one

[bogoblin]

Description

I'm trying out openapi-react-query and I don't seem to be able to get it to work. I'm creating a client like so:

const fetchClient = createFetchClient<paths>({
    baseUrl: "http://localhost:8880"
});
export const $api = createClient(fetchClient);

...and then using it in a component like so:

    const { data, isLoading } = $api.useQuery("get", "/query", {
        params: {
            query: {
                player: false,
                playlists: false,
                playlistItems: true,
                plref: playlistId,
                plrange: '0:100000',
                // @ts-expect-error LibraryColumns is readonly
                plcolumns: LibraryColumns
            }
        }
    });

However, when I run this in the browser, I get the following error message:

openapi-react-query.js?v=2cd51558:985 Uncaught Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient (openapi-react-query.js?v=2cd51558:985:11)
    at useBaseQuery (openapi-react-query.js?v=2cd51558:1080:18)
    at useQuery (openapi-react-query.js?v=2cd51558:1151:10)
    at Object.useQuery (openapi-react-query.js?v=2cd51558:1234:66)
    at FoobarLibrary (foobarLibrary.tsx:143:38)
    at renderWithHooks (react-dom_client.js?v=a0b8382c:11548:26)
    at mountIndeterminateComponent (react-dom_client.js?v=a0b8382c:14926:21)
    at beginWork (react-dom_client.js?v=a0b8382c:15914:22)
    at HTMLUnknownElement.callCallback2 (react-dom_client.js?v=a0b8382c:3674:22)
    at Object.invokeGuardedCallbackDev (react-dom_client.js?v=a0b8382c:3699:24)

I've been reading online about react-query and it seems you need to add a QueryClientProvider around your app, but I'm not sure how to do that.

Proposal

If someone can help me fix this I will contribute to the docs and add a more helpful error message so that others don't have this issue.

Checklist

• [x] I’m willing to open a PR for this (see CONTRIBUTING.md)

[bogoblin]

Update: I figured it out. I'm going to make a PR to improve the docs.

[riya-amemiya]

Hello @bogoblin

How did you manage to resolve this error? I've been struggling with the same issue and haven't been able to find a solution even after searching on Google. Could you please share your solution? It would be really helpful if you could explain the steps you took to fix this problem.

[bogoblin]

d

Hello @bogoblin

How did you manage to resolve this error? I've been struggling with the same issue and haven't been able to find a solution even after searching on Google. Could you please share your solution? It would be really helpful if you could explain the steps you took to fix this problem.

In the root of your app, you need to create a queryClient with react-query. My root looks like this:

import {StrictMode} from 'react'
import {createRoot} from 'react-dom/client'
import './index.css'
import {FoobarLibrary} from "./foobarLibrary.tsx";
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
import {PlaybackControls} from "./playbackControls.tsx";

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            retry: false
        }
    }
});

createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <QueryClientProvider client={queryClient}>
            <FoobarLibrary playlistId="p2"/>
            <PlaybackControls />
        </QueryClientProvider>
    </StrictMode>,
)

[riya-amemiya]

Thank you so much for the solution! This is incredibly helpful.

[kerwanp]

This is a requirement as per the @tanstacl/react-query library and not related to openapi-react-query itself but as this requirement seems to impact a lot of people I'm happy to accept a pull-request that demo how to add the Provider with some links to the official documentation (https://tanstack.com/query/latest/docs/framework/react/quick-start)

[Bjorn-Eric-Abr]

Just to clarify for the documentation - does this only occour when the client is defined in another file than where we use the query?

[kerwanp]

Just to clarify for the documentation - does this only occour when the client is defined in another file than where we use the query?

No this will always happen if you dont explicitly provide a QueryClient or implicitly using a QueryClientProvider. https://tanstack.com/query/latest/docs/framework/react/quick-start

[burnto]

I have a QueryClientProvider and can use standard tanstack-query useQuery hooks fine, but am still seeing this error with openapi-react-query.

[aretel]

This is a requirement as per the @tanstacl/react-query library and not related to openapi-react-query itself but as this requirement seems to impact a lot of people I'm happy to accept a pull-request that demo how to add the Provider with some links to the official documentation (https://tanstack.com/query/latest/docs/framework/react/quick-start)

The docs covers setting up 'openapi-react-query,' so this information should be included as part of the complete setup guide. Without it, users may encounter difficulties, as seen in this instance (me included)

[Shaun1]

Just a suggestion for documentation - it is a bit confusing/unintuitive that one is supposed to create a queryClient with tanstack to pass to the provider wrapper, and then create another queryClient (using the 'openapi-react-query' wrapper this time) to actually use. It might be helpful to clear up the rationale for this.

[chad-fossa]

100% agreed -- openapi-react-query is pitched as a "wrapper around tanstack/react-query" but the docs don't mention the need for a provider so one is left to assume that being a wrapper somehow replaces the need for the provider. It's also not clear that we are using a "createClient" but we still need a separate QueryClient in the provider and such. Gets confusing.

[abraxas]

I have a QueryClientProvider and can use standard tanstack-query useQuery hooks fine, but am still seeing this error with openapi-react-query.

I am experiencing the same. There is still a valid ticket/issue here. I don't know if it's a reactquery version issue or what. I had manual react-queries that used openapi-fetch and replaced them with openapi-react-query only to start getting these queryClient errors. I know I have a valid and working queryClient because I've been using it in my app.

import { useQuery } from '@tanstack/react-query';
import $apiClient, {$queryClient} from '@/lib/apiClient';
import { components } from '@/generated/openapi-schema';

export type UserDto = components['schemas']['UserDto'];

export function useUserRQ() {
  return $queryClient.useQuery(
    "get",
    "/auth/user",
  )
} //<--- queryClient Error

export function useUser() {
  return useQuery({
    queryKey: ['user'],
    queryFn: async () => {
      const response = await $apiClient.GET('/auth/user');
      console.dir({response});
      return response?.data || null;
    },
  });
} //<--- works Fine

[Yuxiang-Huang]

I have a QueryClientProvider and can use standard tanstack-query useQuery hooks fine, but am still seeing this error with openapi-react-query.

I encountered the same problem, and it was indeed a react query version issue for me. I fixed it by first checking the installed versions with npm ls @tanstack/react-query, and then deleting and reinstalling the node modules.