Help Retrieving req.url from opts in useMutation from tRPC
Hello, i'm trying to essentially send a magiclink email using supabase client libraries, however, i'm running into an issue of not being able to retrieve the req.url (in order to get the baseURL). I would prefer not to hard-code it due to changing addresses between localhost, Vercel Preview Branches, Primary Domain.
I believe the way to go here is to utilize a context, however, i'm having trouble setting that up throughout the react-query client portion alongside with the server portion.
// @/api-server/trpc.tsimport { initTRPC } from "@trpc/server";import { createContext } from "./context";const t = initTRPC.context<typeof createContext>().create();export const router = t.router;export const publicProcedure = t.procedure.use((opts) => { if (!opts.ctx.req) { throw new Error('You are missing `req` in your call.'); } return opts.next({ ctx: { // We overwrite the context with the truthy `req` & `res`, which will also overwrite the types used in your procedure. req: opts.ctx.req, }, });});
// @/api-server/trpc.tsimport { initTRPC } from "@trpc/server";import { createContext } from "./context";const t = initTRPC.context<typeof createContext>().create();export const router = t.router;export const publicProcedure = t.procedure.use((opts) => { if (!opts.ctx.req) { throw new Error('You are missing `req` in your call.'); } return opts.next({ ctx: { // We overwrite the context with the truthy `req` & `res`, which will also overwrite the types used in your procedure. req: opts.ctx.req, }, });});
Code for the tRPC on the App Router video. Contribute to jherr/trpc-on-the-app-router development by creating an account on GitHub.
Solution
I just figured it out, it was my lack of understanding that the fetchRouterHandler was meant for edge runtimes, and I had to change my createContext function to
FetchCreateContextFnOptions
FetchCreateContextFnOptions
change my trpc route handler appropriatly for the fetchRouter:
/app/api/trpc/[trpc]/route.ts
/app/api/trpc/[trpc]/route.ts
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";import { appRouter } from "@/api-server";import { NextRequest } from "next/server";// Running on serverless node in Vercel instead, despite using fetchRouteHandlerexport default async function handler(req: Request) { return fetchRequestHandler({ endpoint: "/api/trpc", router: appRouter, req: req, createContext: () => ({req}), })}export { handler as GET, handler as POST };
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";import { appRouter } from "@/api-server";import { NextRequest } from "next/server";// Running on serverless node in Vercel instead, despite using fetchRouteHandlerexport default async function handler(req: Request) { return fetchRequestHandler({ endpoint: "/api/trpc", router: appRouter, req: req, createContext: () => ({req}), })}export { handler as GET, handler as POST };