Expo + tRPC网页端报错：未设置QueryClient，iOS模拟器正常

搭建Expo + tRPC技术栈应用时，类型检查功能正常，iOS模拟器可正常运行，但网页端调用useQuery时出现错误。

相关代码 #

app.tsx #

export default function App() {
  return (
    <AuthenticationProvider>
      <TRPCProvider>
        <ThemeProvider theme={theme}>
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen name="Criteria" component={MovieSearchComponent}/>
              <Stack.Screen name="Results" component={ResultsComponent}/>
            </Stack.Navigator>
          </NavigationContainer>
        </ThemeProvider>
      </TRPCProvider>
    </AuthenticationProvider>
  );
}

ResultsComponent组件代码 #

import { trpc } from "../../utils/trpc-client";

export function ResultsComponent({navigation, route}) {
  const {data} = trpc.moviesRecommendation.useQuery({
    runtimeMinsMin: 100
  })
}

trpc-client.ts #

import { AppRouter } from "../server/trpc";
import { createTRPCReact, httpLink } from "@trpc/react-query";

export const trpc = createTRPCReact<AppRouter>()

export const trpcClient = trpc.createClient({
  links: [httpLink({url: 'http://localhost:3000/api/trpc'})],
})

trpc-provider.tsx #

export function TRPCProvider({children}: PropsWithChildren) {
  const [queryClient] = useState(() => new QueryClient())

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient} contextSharing={true}>
        {children}
      </QueryClientProvider>
    </trpc.Provider>
  )
}

网页端错误信息 #

Uncaught Error: No QueryClient set, use QueryClientProvider to set one
    at Object.useQueryClient (QueryClientProvider.tsx:48:1)
    at Object.useBaseQuery (useBaseQuery.ts:33:1)
    at useQuery (useQuery.ts:139:1)
    at Object.useQuery$1 [as useQuery] (createHooksInternal-808efaa7.mjs:277:1)
    at createHooksInternal-808efaa7.mjs:52:1
    at Object.apply (index-972002da.mjs:18:1)
    at ResultsComponent (results-component.tsx:11:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)

修复方案 #

问题根源在于TRPCProvider的组件嵌套顺序错误：当前是tRPC Provider包裹QueryClientProvider，但tRPC的React Query集成要求**QueryClientProvider必须在tRPC Provider外层**。iOS端因Expo环境特性兼容了错误嵌套，网页端React DOM则严格遵循上下文传递规则，导致tRPC hooks无法获取QueryClient。

修改trpc-provider.tsx的嵌套顺序：

import { useState } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { trpc, trpcClient } from './trpc-client';
import { PropsWithChildren } from 'react';

export function TRPCProvider({children}: PropsWithChildren) {
  const [queryClient] = useState(() => new QueryClient())

  return (
    <QueryClientProvider client={queryClient} contextSharing={true}>
      <trpc.Provider client={trpcClient} queryClient={queryClient}>
        {children}
      </trpc.Provider>
    </QueryClientProvider>
  )
}

额外检查项 #

• 确保所有使用tRPC hooks的组件都被TRPCProvider包裹（你的app.tsx已满足此要求）
• 确认@tanstack/react-query与@trpc/react-query版本匹配，避免版本冲突引发上下文问题

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