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:Jump to solution
FAQ / Troubleshooting | tRPC
Collection of frequently asked questions with ideas on how to troubleshoot & resolve them.
8 Replies
Solution
FAQ / Troubleshooting | tRPC
Collection of frequently asked questions with ideas on how to troubleshoot & resolve them.
Thankls.
GitHub
GitHub - trpc/examples-next-app-dir
Contribute to trpc/examples-next-app-dir development by creating an account on GitHub.
@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.
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👍🙏
@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" componentsThank you.