[v3] Creatingreusable component involving React-Query

[Purus]

I am trying to create multiple reusable components involving multiple remote queries, so that projects that use this component does not have to worry about dealing with data fetching.

It was all working fine in v2. But for a new component library that I am working I am using v3 and struck now. I understand that v3 now requires QueryCientProvider at the top of the React tree.

Since mine is a atom level component, how should I be doing this? Should I include QueryCientProvider for each smaller component?

I do not like the idea of making other teams/projects to include QueryCientProvider in their tree.

[TkDodo]

I think you can re-export the Provider from your component library and the consumers can just use that or do they don’t need to depend on react-query themselves.

i think it would also work if you wrap each component with it’s own provider - but they wouldn’t share a cache then...

[Purus]

I tried using the provider for each of the component. But I get the below error when testing the component using StoryBook.

No QueryClient set, use QueryClientProvider to set one
Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient (http://localhost:49579/vendors~main.b2a7c5c6d70ebb79ba9c.bundle.js:212791:11)
    at useBaseQuery (http://localhost:49579/vendors~main.b2a7c5c6d70ebb79ba9c.bundle.js:213014:96)
    at useQuery (http://localhost:49579/vendors~main.b2a7c5c6d70ebb79ba9c.bundle.js:213288:76)
    at useById (http://localhost:49579/main.b2a7c5c6d70ebb79ba9c.bundle.js:2821:79)
    at MyTable (http://localhost:49579/main.b2a7c5c6d70ebb79ba9c.hot-update.js:56:103)
    at renderWithHooks (http://localhost:49579/vendors~main.b2a7c5c6d70ebb79ba9c.bundle.js:198903:18)
    at mountIndeterminateComponent (http://localhost:49579/vendors~main.b2a7c5c6d70ebb79ba9c.bundle.js:201582:13)
    at beginWork (http://localhost:49579/vendors~main.b2a7c5c6d70ebb79ba9c.bundle.js:202696:16)
    at HTMLUnknownElement.callCallback (http://localhost:49579/vendors~main.b2a7c5c6d70ebb79ba9c.bundle.js:184288:14)
    at Object.invokeGuardedCallbackDev (http://localhost:49579/vendors~main.b2a7c5c6d70ebb79ba9c.bundle.js:184337:16)

Any example would be helpful.

[TkDodo]

Have you added a provider in storybook?

[Purus]

I assume I don't have to add a provider in storybook if I already wrapped my core component with QueryClientProvider. Each of my component will be wrapped by QueryClientProvider.

Is this a better approach?

[TkDodo]

if you mount a component that itself is wrapped in a QueryClientProvider in storybook, then yes, you don't need another provider, but I then also don't see how you can get that error.

Judging from the stacktrace, you try to mount a MyTable component that invokes useById, and I don't see a QueryClientProvider here in that trace ...

[Alexmckey1337]

I am also facing a similar issue, is there some workaround or solution?