在Category子组件中使用TanStack Query遇QueryClient未设置错误

问题原因 #

你仅在Home页面组件内包裹了QueryClientProvider，但pages/category/[pid].js是Next.js的独立路由页面，不在Home的组件树范围内，因此该页面无法获取QueryClient实例，触发报错。

解决方案 #

在Next.js的**根组件_app.js**中全局配置QueryClientProvider，让所有路由页面都处于Provider的上下文覆盖范围内。

修改_app.js代码： #

import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import { Fragment } from 'react';

// 创建全局QueryClient实例
const queryClient = new QueryClient();

function MyApp({ Component, pageProps }) {
  return (
    <Fragment>
      <QueryClientProvider client={queryClient} contextSharing={true}>
        <Component {...pageProps} />
        <ReactQueryDevtools initialIsOpen={true} />
      </QueryClientProvider>
    </Fragment>
  );
}

export default MyApp;

后续调整 #

• 移除Home页面中的QueryClientProvider及相关React Query导入，避免重复包裹。
• 调整后所有页面（包括pages/category/[pid].js）均可正常使用useQuery钩子。

内容的提问来源于stack exchange，提问作者Selcukusu