I have pretty simple tRPC server:
// 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;
And here’s the client (almost 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',
},
});
And I’m getting a faily generic “Did you forget to wrap your App inside withTRPC
HoC?” error:
I’m struggling to understand what went wrong here as there’s trpc.Provider
and QueryClientProvider
already in the App’s render tree and properly setup.
I’d really appreciate if I could get a hint at what’s wrong with this setup!