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()...
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.
David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.
