How to set QueryClientProvider from tanstack/react-query in storybook

In storybook, I'm getting the following error: No QueryClient set, use QueryClientProvider to set one

In my _app.tsx:

const queryClient = new QueryClient(); const MyApp = ({ Component, pageProps }: AppProps) => { return ( <QueryClientProvider client={queryClient}> <Component {...pageProps} /> </QueryClientProvider> ); }; 

I've tried to wrap the story in QueryClientProvider:

// method 1 export default { ... decorators: [ (Story) => { const queryClient = new QueryClient(); return ( <QueryClientProvider client={queryClient}> <Story /> </QueryClientProvider> ); }, ], } as Meta; // method 2 export const Complete = () => { const queryClient = new QueryClient(); return ( <QueryClientProvider client={queryClient}> <AuthenticationPage /> </QueryClientProvider> ); }; 

But neither is working; I dug through the internet and all non of the solutions are for storybook specific.

2 Answers

I was able to fix the issue by adding a decorator for query client into my story.

const queryClient = new QueryClient(); export default { title: "Home Page/MovieCard", component: MovieCard, decorators: [ (Story) => ( <QueryClientProvider client={queryClient}>{Story()}</QueryClientProvider> ) ], }; 

Just wrestled with what I thought was the same issue, and it turned out that I was making the query at the same level as I was specifying the provider. This goes against the React rendering lifecycle, as the query will be attempted before context is made available. I would double check that you aren't facing this, rather than a storybook-specific issue.