TRPC+tanstack/react-query+Next.js仍报No QueryClient set错误求助

问题原因 #

你遇到的错误源于TRPC的withTRPC高阶组件会自动创建并注入专属的QueryClient实例，但你手动添加的QueryClientProvider使用了独立创建的实例，两者不一致导致React Query无法识别正确的客户端；同时你未将自定义QueryClient传入TRPC配置，TRPC内部会生成新实例，进一步加剧了冲突。

解决步骤 #

方案一：让TRPC管理QueryClient（推荐） #

移除手动的QueryClientProvider，直接在TRPC配置中设置QueryClient默认选项：

1. 修改src/services/index.tsx：

import { AppRouter } from "server";
import { createTRPCNext } from "@trpc/next";
import { httpBatchLink } from "@trpc/client";

export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        httpBatchLink({
          url: process.env.NEXT_PUBLIC_API_URL as string,
        }),
      ],
      // 在这里配置QueryClient的默认选项
      queryClientConfig: {
        defaultOptions: {
          queries: {
            refetchOnWindowFocus: false,
          },
        },
      },
    };
  },
  ssr: false,
});

2. 修改_app.tsx，删除手动添加的QueryClientProvider：

import { AppProps } from "next/app";
import { trpc } from "../src/services";

const App = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />;
};

export default trpc.withTRPC(App);

方案二：使用自定义QueryClient #

若需自行管理QueryClient实例，需确保TRPC和QueryClientProvider使用同一个实例：

1. 修改src/services/index.tsx，将自定义QueryClient传入TRPC配置：

import { AppRouter } from "server";
import { createTRPCNext } from "@trpc/next";
import { httpBatchLink } from "@trpc/client";
import { QueryClient } from "@tanstack/react-query";

export const client = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
});

export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        httpBatchLink({
          url: process.env.NEXT_PUBLIC_API_URL as string,
        }),
      ],
      // 指定使用自定义的QueryClient实例
      queryClient: client,
    };
  },
  ssr: false,
});

2. 修改_app.tsx，确保TRPC高阶组件与QueryClientProvider使用同一实例：

import { AppProps } from "next/app";
import { trpc, client } from "../src/services";
import { QueryClientProvider } from "@tanstack/react-query";

const App = trpc.withTRPC(({ Component, pageProps }: AppProps) => {
  return (
    <QueryClientProvider client={client}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
});

export default App;

注：此场景下也可直接移除手动的QueryClientProvider，因为TRPC的withTRPC会自动用你传入的实例提供上下文。

验证示例 #

修改完成后重启开发服务器，在/pages/index.tsx中使用TRPC query测试：

import { trpc } from "../src/services";

export default function Home() {
  const data = trpc.yourQueryName.useQuery();
  return <div>{data.data?.content}</div>;
}

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