using tRPC inside rsc

[rahulpeacock]

Describe the feature you'd like to request

I would like to use tRPC inside React server components

Describe the solution you'd like to see

we can use the createCaller() function of the appRouter to use tRPC inside rsc without react-query

// client/trpc/server.ts

import { appRouter } from '@/server/api';
import { session } from '@/server/auth';
import { db } from '@/server/db';

/**
 * #. TRPC SERVER PROVIDER
 *
 * provides the db and session for the react server components
 */
export const trpcs = async () => appRouter.createCaller({ session: await session(), db }); 

use the trpcs function inside the React server components

// app/page.tsx - rsc

import { trpcs } from '@/client/trpc/server';

export default async function Page() {
    const trpc = await trpcs();
    const serverTodos = await trpc.post.getTodos();

    console.log('server todos - ', serverTodos);
    return <main>home page</main>;
}

NOTE: I know we use the top level await for getting the session inside client/trpc/server.ts file but in doing so I am this error

// client/trpc/server.ts

import { appRouter } from '@/server/api';
import { session } from '@/server/auth';
import { db } from '@/server/db';

/**
 * #. TRPC SERVER PROVIDER
 *
 * provides the db and session for the react server components
 */
export const trpcs = appRouter.createCaller({ session: await session(), db }); 

usage inside page.tsx when using top level await for getting the session inside client/trpc/server.ts

// app/page.tsx - rsc

import { trpcs } from '@/client/trpc/server';

export default async function Page() {
    const serverTodos = await trpcs.post.getTodos();

    console.log('server todos - ', serverTodos);
    return <main>home page</main>;
}

ERROR:

webpack-internal:///(rsc)/./node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0_sass@1.66.1/node_modules/next/dist/client/components/headers.js:38
        throw new Error("Invariant: headers() expects to have requestAsyncStorage, none available.");
              ^

Error: Invariant: headers() expects to have requestAsyncStorage, none available.
    at headers (webpack-internal:///(rsc)/./node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0_sass@1.66.1/node_modules/next/dist/client/components/headers.js:38:15)
    at getServerSession (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.4.19_nodemailer@6.9.5_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:106:41)
    at session (webpack-internal:///(rsc)/./src/server/auth/index.ts:36:77)
    at eval (webpack-internal:///(rsc)/./src/client/trpc/server.ts:16:77)
    at eval (webpack-internal:///(rsc)/./src/client/trpc/server.ts:18:8)
    at (rsc)/./src/client/trpc/server.ts (D:\coding\Dev\remote\next-auth-trpc-thing\.next\server\app\page.js:4096:1)
    at __webpack_require__ (D:\coding\Dev\remote\next-auth-trpc-thing\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/app/page.tsx:7:77)
    at (rsc)/./src/app/page.tsx (D:\coding\Dev\remote\next-auth-trpc-thing\.next\server\app\page.js:4027:1)
    at Function.__webpack_require__ (D:\coding\Dev\remote\next-auth-trpc-thing\.next\server\webpack-runtime.js:33:43)

Node.js v18.16.0

Additional information

I got inspired from the Youtube video of Jack Herrington, here is the link to the video

[tanjunior]

kirimase also have a good implementation of trpc in rsc. And it is also being actively maintained.

[rahulpeacock]

kirimase also have a good implementation of trpc in rsc. And it is also being actively maintained.

Can you share any repo for reference

[noxify]

Could be this one?

https://github.com/nicoalbanese/kirimase

[juliusmarminge]

create-t3-app will soon have the app router option, there is a beta there you can use for reference

[piotrkulpinski]

create-t3-app will soon have the app router option, there is a beta there you can use for reference

Could you share a link to the example of TRPC usage inside RSC in create-t3-app?

[rahulpeacock]

create-t3-app will soon have the app router option, there is a beta there you can use for reference

Could you share a link to the example of TRPC usage inside RSC in create-t3-app?

@piotrkulpinski now create-t3-app supports app-router too. You can refer to that