[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

• 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.