tRPC•3y 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

https://trpc.io/docs/faq#does-trpc-work-with-nextjs-13-app-layouts--rsc

FAQ / Troubleshooting | tRPC

Collection of frequently asked questions with ideas on how to troubleshoot & resolve them.

Jump to solution

Solution

Nick•6/9/23, 10:09 PM

https://trpc.io/docs/faq#does-trpc-work-with-nextjs-13-app-layouts--rsc

FAQ / Troubleshooting | tRPC

Collection of frequently asked questions with ideas on how to troubleshoot & resolve them.

MajOP•6/9/23, 10:19 PM

Thankls.

Pieter•6/19/23, 3:46 PM

https://github.com/trpc/examples-next-app-dir

GitHub

GitHub - trpc/examples-next-app-dir

Contribute to trpc/examples-next-app-dir development by creating an account on GitHub.

PotatisMannen•6/21/23, 10:10 AM

@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.

GitHub

feat: Support RSC & App Layouts · Issue #3297 · trpc/trpc

Update - Prior art: https://github.com/apollographql/apollo-client-nextjs/blob/pr/RFC-2/RFC.md#option-wrap-the-suspense-component https://github.com/urql-graphql/urql/pull/3214/files#diff-4c8e87f79...

PotatisMannen•6/21/23, 10:11 AM

basically you can use trpc client side with the app dir but you need to use the in a "use client" component that you can then wrap your app with in a layout, instead of using the HOC like we used to do for the pages dir

hope that helps

MajOP•6/21/23, 12:09 PM

PotatisMannen•6/21/23, 11:03 PM

@docc. i just implemented it according to the thread. used the following docs:

use the section of the trpc docs
use the fetch adapter as shown in the thread for
type your
```
createContext
```
```
createContext
```
function using the type. import this from the same place package as the fetch adapter
find an example of how to make a file which exports a instance
make a component as shown in the thread as well and wrap your layout with it
comsume your calls in
```
"use client"
```
```
"use client"
```
components

MajOP•6/22/23, 4:34 PM

Thank you.