What's the difference between the `api` exported from react.tsx and the `api` from server.ts?
I'm using Next, tRPC, & prisma. In the boilerplate, there's two
api objects. One is created with createTRPCReact, and the other created with createHydrationHelpers. What's the difference in what they do? In the examples on StackBlitz there's only one, and it's created with createTRPCNext: https://stackblitz.com/run?file=example-app%2Fsrc%2Fpages%2Findex.tsx,example-app%2Fsrc%2Futils%2Fapi.tsStackBlitz | Instant Dev Environments | Click. Code. Done.
StackBlitz is the collaborative browser-based IDE for web developers. StackBlitz eliminates time-consuming local configuration and lets developers spend more time building.
Solution:Jump to solution
the api from react.tsx is meant for the client with the tanstack-query bindings while the api exported from server.tsx is meant for use within the server only (async components and server functions)
6 Replies
Solution
the api from react.tsx is meant for the client with the tanstack-query bindings while the api exported from server.tsx is meant for use within the server only (async components and server functions)
@Zougui thanks 🙏 so if I'm calling
api.posts.<whatever> in my component and that api object is coming from ~/trpc/server, that's incorrect?if it's an async component, like one that is exported from a
page.tsx in the app folder, yes. do keep in mind that the functions in the api exported from server.tsx are async.
if your component is not async then no, you'll have to use the api from react.tsxAnd for async components we can import directly from server.tsx?
yes
thank you 🙏