Maj
Majโ€ข12mo ago

trpc with app dir nextjs

Hello im wondering how to use trpc with nextjs app router now?. I have t3 app but for now its a src/pages directory structure. if i want to switch to app directory is it possible to use trpc with it?
Solution:
FAQ / Troubleshooting | tRPC
Collection of frequently asked questions with ideas on how to troubleshoot & resolve them.
Jump to solution
8 Replies
Solution
Nick
Nickโ€ข12mo ago
FAQ / Troubleshooting | tRPC
Collection of frequently asked questions with ideas on how to troubleshoot & resolve them.
Maj
Majโ€ข12mo ago
Thankls.
A. Perkamentus
A. Perkamentusโ€ข12mo ago
GitHub
GitHub - trpc/examples-next-app-dir
Contribute to trpc/examples-next-app-dir development by creating an account on GitHub.
PotatisMannen
PotatisMannenโ€ข12mo ago
@docc. https://github.com/trpc/trpc/issues/3297#issuecomment-1423905894 i found this thread that was linked to from the trpc docs where where folks discuss incremental improvements to using trpc with the app dir. the specific comment i linked here shows how to use the trpc provider in the app dir context. I havent tried it myself yet though, but ill come back and update this when i do.
PotatisMannen
PotatisMannenโ€ข12mo ago
basically you can use trpc client side with the app dir but you need to use the trpc.Provider in a "use client" component that you can then wrap your app with in a layout, instead of using the withTRPC HOC like we used to do for the pages dir ๐Ÿ™‚ hope that helps
Maj
Majโ€ข12mo ago
๐Ÿ‘๐Ÿ™
PotatisMannen
PotatisMannenโ€ข12mo ago
@docc. i just implemented it according to the thread. used the following docs: 1. use the client usage - react query integration section of the trpc docs 2. use the fetch adapter as shown in the thread for app/api/trpc/[trpc]/route.ts 3. type your createContext function using the FetchCreateContextFnOptions type. import this from the same place package as the fetch adapter 4. find an example of how to make a ~/util/trpc.ts file which exports a trpc instance 4. make a trpc.Provider component as shown in the thread as well and wrap your layout with it 6. comsume your trpc.queryName.useQuery() calls in "use client" components
Maj
Majโ€ข12mo ago
Thank you.
More Posts
if I export 'appRouter' instead of 'router' I get errorhey everyone, I have this exact setup https://icflorescu.github.io/trpc-sveltekit/getting-started I React Native/Expo: Uncaught Error: No QueryClient set, use QueryClientProvider to set oneFound this issue but it just says to use patch-package, I was wondering if there was any changes sinAll values in DecoratedProcedureRecord are of type anyI've stumbled across an issue and I'm not sure how to start diagnosing it... Basically in my IDE tDetecting batch queries/mutations on the server-sideHello all, Looking to leverage batching as a means to streamline some of our cross-service requests,VS Code becomes unresponsiveHello everyone, I've started to experience huge performance issues with my project that's based onMiddleware-ish for clientHi! I had a quick question about client-side usage: I have users with long-running sessions, and iWhy cannot I specify a mutation input with useQueryKey?It's supported with queries, but for some reason not with mutations. Why is this the case?how to connect trpc server (t3 stack) from my external nextjs app?how to connect trpc server (t3 stack) from my external nextjs app?trpc.legacyRouterName.procedure "does not exist" on type CreateTRPCNextBase, runs anywayHave reached the end of a massive trpc 9 -> trpc 10 migration, executed using the official guide witNot getting legacy router ops in merged tRPC 9 routerFollowed the guide to merge my large tRPC 9 router with tRPC 10, but now I can't use useQuery or acc