Tamás Soós
Tamás Soós
TtRPC
Created by Tamás Soós on 11/1/2023 in #❓-help
Next.js app directory
Hi. I have been able to set up tRPC with the app directory in Next.js. It was a frustrating experience at first. You can find a simple setup here. I'm not sure if this is still the best way to do so, or that it has ever been for that matter. Could someone confirm if this is the way to do it right now, or if I'm missing out on some features this way? I found this experimental project. The note says I could use the @trpc/next client too, but I'm not sure how. Maybe I just haven't found the right docs, but it seems like integrating with the app dir isn't officially documented, right? I'd be happy to contribute too.
2 replies
TtRPC
Created by Tamás Soós on 10/27/2023 in #❓-help
tRPC over WebSocket with Next.js and NextAuth
Hi. I'm trying to set up Next 13 with tRPC over a WebSocket and NextAuth. I got it mostly working with:
// route.ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { createContext } from '@/server/context';
import { appRouter } from '@/server/routers/app';

const handler = (req: Request) =>
fetchRequestHandler({
endpoint: '/api/trpc',
req,
router: appRouter,
createContext,
batching: {
enabled: true,
},
});

export { handler as GET, handler as POST };
// route.ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { createContext } from '@/server/context';
import { appRouter } from '@/server/routers/app';

const handler = (req: Request) =>
fetchRequestHandler({
endpoint: '/api/trpc',
req,
router: appRouter,
createContext,
batching: {
enabled: true,
},
});

export { handler as GET, handler as POST };
// context.ts
import * as trpc from '@trpc/server';
import * as trpcNext from '@trpc/server/adapters/fetch';
import { NodeHTTPCreateContextFnOptions } from '@trpc/server/adapters/node-http';
import { IncomingMessage } from 'node:http';
import ws from 'ws';
import { getSession } from 'next-auth/react';

export async function createContext(
opts:
| NodeHTTPCreateContextFnOptions<IncomingMessage, ws>
| trpcNext.FetchCreateContextFnOptions
) {
const req = opts?.req;

const session = req && (await getSession({ req }));

return {
req,
session,
};
}

export type Context = trpc.inferAsyncReturnType<typeof createContext>;
// context.ts
import * as trpc from '@trpc/server';
import * as trpcNext from '@trpc/server/adapters/fetch';
import { NodeHTTPCreateContextFnOptions } from '@trpc/server/adapters/node-http';
import { IncomingMessage } from 'node:http';
import ws from 'ws';
import { getSession } from 'next-auth/react';

export async function createContext(
opts:
| NodeHTTPCreateContextFnOptions<IncomingMessage, ws>
| trpcNext.FetchCreateContextFnOptions
) {
const req = opts?.req;

const session = req && (await getSession({ req }));

return {
req,
session,
};
}

export type Context = trpc.inferAsyncReturnType<typeof createContext>;
9 replies