如何从故事书中的 tanstack/react-query 设置 QueryClientProvider

Question

在故事书中，我收到以下错误：No QueryClient set, use QueryClientProvider to set one

在我的 _app.tsx 中：

const queryClient = new QueryClient();

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

我试图将故事包装在 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>
  );
};

但两者都不起作用；我通过互联网挖掘，所有非解决方案都是针对故事书的。

Answer 1

只是与我认为是同一问题的问题搏斗，结果发现我在指定提供者的同一级别上进行查询。这违背了 React 渲染生命周期，因为查询将在上下文可用之前尝试。我会仔细检查您是否面临这个问题，而不是特定于故事书的问题。

Answer 2

有没有人找到答案？我在这里有同样的问题。谢谢！