App dir + tRPC +
Hi, I am setting up a project with [[email protected] + /app + tRPC (v10.27.1) + @tanstack/react-query (v5.0.0-alpha.58)], and I had a few questions about how this all works with the app directory.
I saw that with the /pages directory, you would use the hoc trpc.withTRPC, a <trpc.Provider client={...}>, and a <QueryClientProvider client={...}> to pass the tRPC to the rest of the app, but in my project I see a trpc/client.ts which seems to create a similar client to above but uses experimental_createTRPCNextAppDirClient.
Firstly, how do client calls to tRPC work without setting up any context (unless I'm missing something) and what is experimental_createTRPCNextAppDirClient doing?
Secondly, I'm just curious about how I setup react query with this whole setup.
Apologies if this has already been answered or if I'm missing something obvious (I've tried reading a lot of documentation for tRPC and React Query but I couldn't find much useful for the app dir and figured I'd come here), thanks!
14 Replies
First of all, you can ignore the
experimental_createTRPCNextAppDirClient if you're using /pages and not /app.
Second of all, you already have react query setup as trpc is react-query under the hood ( though I've never used react query itself during the usage of trpc, but they're basically twins, trpc being the more flashier one )
The reason you might've not found much docs is because the first point you mentioned is a relatively new, and the second one is basically unheard-of/rare while someone uses trpc, it's not hard but it's not something one would do if they're using trpcSorry to clarify I am using the app directory. I didn't know it was using react-query under the hood ty!
well, it's there on their home-page about the react query thing..... anyways
using trpc on the
app dir is not very stable to say at the least at the moment
I know of an article which can help you set it up. Although
this is the first time I've heard of the experimental_createTRPCNextAppDirClient thing 🤔 and I setup a new trpc project 1-2 weeks ago. This is very new
let me see it firstEdem
CodevoWeb
Setup tRPC Server and Client in Next.js 13 App Directory - CodevoWeb
Are you interested in using tRPC in the new Next.js 13 app directory? Look no further! In this article, I’ll walk you through the process...
this should help
also
GitHub
GitHub - trpc/examples-next-app-dir
Contribute to trpc/examples-next-app-dir development by creating an account on GitHub.
This is very useful
crazy. I literally came here to ask about the same thing on a saturday night 🙂
hm this is all so experimental I might just be type-unsafe for sake of building my feature :p
if it's using react-query under the hood (or maybe it isnt?), im curious as to why using
experimental_createTRPCNextAppDirClient from @trpc/next/app-dir/client that api.post.get.query({id: 1}) doesnt have to follow the "rule of hooks" where as if I use something like createTRPCReact from @trpc/client then api.post.get.useQuery({id: 1}) does.
Ah nvm looks like it doesnt use react query at all for experimental_createTRPCNextAppDirClientaye what? trpc's existence is react-query, without it it's not supposed to exist
https://github.com/trpc/trpc/blob/main/packages/next/src/app-dir/client.ts
Unless I'm missing something it looks like it's just using a Map
GitHub
trpc/client.ts at main · trpc/trpc
🧙♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy. - trpc/client.ts at main · trpc/trpc
Maybe back to /pages we go
ah you meant it in that manner..... I see how it works alright
how much type-safety do u really want with /app?
t3 already gives u a prisma client so u can access that from /app to do what u want