Decorator in Storybook

[MattCarr147]

Hi there,

I'm having trouble using react-query with Storybook (v6.3.6). Specifically, I am encountering the following error when viewing my stories within the Storybook UI:

No QueryClient set, use QueryClientProvider to set one
Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient (http://localhost:9009/vendors~main.iframe.bundle.js:214661:11)
    at useBaseQuery (http://localhost:9009/vendors~main.iframe.bundle.js:214760:104)
    at useQuery (http://localhost:9009/vendors~main.iframe.bundle.js:214941:84)
    at usePosts (http://localhost:9009/main.iframe.bundle.js:9228:75)
    at PostsView (http://localhost:9009/main.iframe.bundle.js:7970:85)
    at renderWithHooks (http://localhost:9009/vendors~main.iframe.bundle.js:191743:18)
    at mountIndeterminateComponent (http://localhost:9009/vendors~main.iframe.bundle.js:194569:13)
    at beginWork (http://localhost:9009/vendors~main.iframe.bundle.js:195807:16)
    at HTMLUnknownElement.callCallback (http://localhost:9009/vendors~main.iframe.bundle.js:180703:14)
    at Object.invokeGuardedCallbackDev (http://localhost:9009/vendors~main.iframe.bundle.js:180752:16)

I have configured a global decorator in Storybook as follows, note that this pattern has been used for HOCs from various different libraries without issue:

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

const withApiProvider = (Story) => {
    const queryClient = new QueryClient();

    return (
        <QueryClientProvider queryClient={queryClient}>
            <Story />
        </QueryClientProvider>
    );
};

export default withApiProvider;

Any ideas? Has anyone got react-query working with Storybook?

[TkDodo]

we also use decorators in storybook for that and it works well.

[MattCarr147]

That's promising, though as mentioned it doesn't seem to be working well for me! :(

Does there look to be anything wrong with the code I've posted above, compared to your working examples? Feels like I must be missing something obvious, but I've no idea what!

[TkDodo]

maybe the decorator isn't applied? You're not showing that part :)

[MattCarr147]

Ah my bad. I've tried applying the decorator in a few ways, the current one being the closest I can get to matching the docs:

// .storybook / preview.js

const queryClient = new QueryClient();

export const decorators = [
    (Story) => (
        <QueryClientProvider queryClient={queryClient}>
            <Story />
        </QueryClientProvider>
    )
];

I dropped a breakpoint in there to confirm that it's being run and it is.

I'd initially imported that function from elsewhere and I've also tried using the addDecorator() method provided by storybook, which I think was an older way of doing things. Encountering the same issue no matter what method I use so far.

Edit: just adding the instantiation of queryClient, which I forgot to include in here.

[MattCarr147]

Doh! So the (depressingly obvious, now I've seen it) issue is that I was passing in the prop queryClient when I should have been passing in client.

What an idiot! 😆

[TkDodo]

I didn't even see that. I rely so much on TypeScript that I can't read code without it 😆 . And also, I never remember what the correct prop is either. well spotted :)