T
tRPC

nextjs app router `fetchRequestHandler`'s createContext doesn't run.

nextjs app router `fetchRequestHandler`'s createContext doesn't run.

Hhaquinn8/24/2023
Hey there, I have the following code:
// /src/app/api/trpc/[trpc]/route.ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from '~/trpc/root';
import { ENV } from '~/env';
import { createTRPCContext } from '~/trpc/trpc';

const handler = (req: Request) =>
fetchRequestHandler({
req,
router: appRouter,
endpoint: '/api/trpc',
onError: ({ path, error }) => {
if (ENV.NODE_ENV !== 'development') return;
console.error(
`❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message} `
);
},
createContext: createTRPCContext,
});

export { handler as GET, handler as POST };
// /src/app/api/trpc/[trpc]/route.ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from '~/trpc/root';
import { ENV } from '~/env';
import { createTRPCContext } from '~/trpc/trpc';

const handler = (req: Request) =>
fetchRequestHandler({
req,
router: appRouter,
endpoint: '/api/trpc',
onError: ({ path, error }) => {
if (ENV.NODE_ENV !== 'development') return;
console.error(
`❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message} `
);
},
createContext: createTRPCContext,
});

export { handler as GET, handler as POST };
Hhaquinn8/24/2023
// /src/trpc/trpc.ts
import { initTRPC, TRPCError } from '@trpc/server';
import superjson from 'superjson';
import { ZodError } from 'zod';
import { getServerAuthSession } from '~/auth/auth';

export const createTRPCContext = async () => {
console.log('Context');
return await getServerAuthSession();
};

const t = initTRPC.context<typeof createTRPCContext>().create({
transformer: superjson,
errorFormatter({ shape, error }) {
return {
...shape,
data: {
...shape.data,
zodError:
error.cause instanceof ZodError ? error.cause.flatten() : null,
},
};
},
});

export const createTRPCRouter = t.router;

const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
console.log(ctx);
if (!ctx.session?.user) {
throw new TRPCError({ code: 'UNAUTHORIZED' });
}
return next({
ctx: {
session: { ...ctx.session, user: ctx.session.user },
},
});
});

export const publicProcedure = t.procedure;
export const protectedProcedure = t.procedure.use(enforceUserIsAuthed);
// /src/trpc/trpc.ts
import { initTRPC, TRPCError } from '@trpc/server';
import superjson from 'superjson';
import { ZodError } from 'zod';
import { getServerAuthSession } from '~/auth/auth';

export const createTRPCContext = async () => {
console.log('Context');
return await getServerAuthSession();
};

const t = initTRPC.context<typeof createTRPCContext>().create({
transformer: superjson,
errorFormatter({ shape, error }) {
return {
...shape,
data: {
...shape.data,
zodError:
error.cause instanceof ZodError ? error.cause.flatten() : null,
},
};
},
});

export const createTRPCRouter = t.router;

const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
console.log(ctx);
if (!ctx.session?.user) {
throw new TRPCError({ code: 'UNAUTHORIZED' });
}
return next({
ctx: {
session: { ...ctx.session, user: ctx.session.user },
},
});
});

export const publicProcedure = t.procedure;
export const protectedProcedure = t.procedure.use(enforceUserIsAuthed);
When i invoke any trpc endpoint with an http request, the request goes through, but the context does not run. I'm pretty sure the createTRPCContext should be invoked on every request/batch of requests
Ssachin8/24/2023
are you passing createContext to fetchRequestHandler ah nvm it’s in the post body this is definitely a bug can you create an issue with a minimal reproduction?
Hhaquinn8/24/2023
I'll try to Hey @sachinraja sorry for the ping, however, do you guys have an example tRPC with react 13 app router ?
Hhaquinn8/24/2023
Last question: Are you sure what i sent above is a bug? Should the createContext run on every single request made to trpc ?
Ssachin8/25/2023
yes
Hhaquinn8/25/2023
What if it's used with appRouter.createCaller?
Ssachin8/25/2023
yes but you have to pass createContext to that too
Hhaquinn8/25/2023
Well there were some example with appRouter.createCaller(await createContext()) But as we know, this means top level await... which is not supported afaik.
Ssachin8/25/2023
you shouldnt be calling createCaller at the top level
Hhaquinn8/25/2023
Do you have an example/snippet you could link me to see?
Ssachin8/25/2023
what are you using it for
Hhaquinn8/25/2023
Well nothing so far. I'm very new to react space and i've been meaning to setup myself a nextjs app router project template to use I'm trying to understand how the whole structure maps out and works under the hood.

Looking for more? Join the community!

T
tRPC

nextjs app router `fetchRequestHandler`'s createContext doesn't run.

Join Server
Recommended Posts
"Unable to transform response from server" when 401 error returned from middleware (sometimes)I'm trying to figure out a problem where some (a few, not most) 401 error responses result in an uncHow do pass a 'blob' from frontend to backend?I'm having trouble doing this without converting an audio Blob to base64 and then decrypting it and fetch failed - error on npm start on productionI rebuild my next.js app with the npm run build command and I started it with npm start I get thisType return error when using mongoose.node - v16.15.1 npm I'm somewhat new to trpc. Using it with mongoose. Love it so far althought I douseContext won't infer type from tRPC clientI am calling tRPC endpoints from my app and it's working flawlessly. As you can see on first screensForward client headers with createTRPCProxyClient & Server-Side HelpersWith `createTRPCNext` i had the option to tap into the `context.req` object nextjs passed in, but I I have a websocket + REST project. Should I be using splitLink like this to combine WS and HTTP?I have a backend project that uses REST for queries/mutations and Websockets for subscriptions. I jNested procedures are separated by dots, is there a way to change that to `/`s instead ?currently it looks something like this `/api/trpc/post.byId`, is there a way to have it like `/api/tIs there a way to split a trpc api across multiple lambdas ?How do I go about splitting my TRPC api across multiple lambdas, such that each lambda would load thCan I alter the context in a procedure?Is there a proper way to do this? Mutating the `opts.ctx` directly seems wrongtRPC & getInitialPropsSo I am not using Next new App router but cant figure it out how to call a method during SSR with geGetting 413 error in Vercel when batching several queries (using Next pages router)Hi guys, I'm having a weird error on Vercel: "LAMBDA_RUNTIME Failed to post handler success responsQueries work but mutations do notOdd bug I'm experiencing with TRPC + react-query + the koa adapter. I just set everything up per docuseContext utils getData always returning undefinedI have my app set up with TRPC and when trying to call ` const utils = trpc.useContext();` `consTRPC Error HandlingI am using TRPC as my backend for my nextjs application. The one major problem i am facing is that, CORS issue with Lambda Handler (SST)no idea what's going on with this error. been stuck on it for way too long. i tried adding the test-TRPC API not working for production buildI am using Trpc and next in project, The App is fully functional with dev build , but api's giving 4Get object type using UseTRPCQueryResultthis code ```ts type playlistOutputData = UseTRPCQueryResult< inferRouterOutputs<AppRouter>["notifNeed help with type hinting a function that accepts a trpc client router```js interface CreateModelProps<GetResult> { name: string, procedures: DecoratedProcedureReDatabase error on examples-next-prisma-starterHi, im on node 18.16.0. I'm trying to clone and use this : https://github.com/trpc/examples-next-pri