我有一个非常简单的tRPC服务器：

// server.ts
import { initTRPC } from "@trpc/server";
import { z } from "zod";

const t = initTRPC.create();

export const appRouter = t.router({
    greeting: t.procedure
        .input(
            z.object({
                name: z.string().optional()
            }))
        .query(({ input }) => {
            return {
                message: `hello ${input.name ?? "world"}`
            };
        }),
});

export type AppRouter = typeof appRouter;

下面是客户端（几乎是vanilla expo-template-blank-typescript）：

// App.tsx
import { StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createTRPCReact, httpBatchLink } from '@trpc/react-query';
import type { AppRouter } from '../backend';

const queryClient = new QueryClient();

const trpc = createTRPCReact<AppRouter>();

const trpcClient = trpc.createClient({
  links: [
    httpBatchLink({
      url: "http://localhost:9696"
    })
  ]
})

export default function App() {
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <View style={styles.container}>
          <Text>Open up App.tsx to start working on your app!</Text>
          <Text>{trpc.greeting.useQuery({ name: "expo client" }).data?.message}</Text>
          <StatusBar style="auto" />
        </View>
      </QueryClientProvider>
    </trpc.Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

我得到了一个失败的通用“你忘了把你的应用程序 Package 在withTRPC HoC里面吗？“错误：

我很难理解这里出了什么问题，因为应用程序的渲染树中已经有trpc.Provider和QueryClientProvider，并且已经正确设置了。
我真的很感激，如果我能得到一个提示，在什么是错误的这个设置！