T
tRPC

Help Retrieving req.url from opts in useMutation from tRPC

Help Retrieving req.url from opts in useMutation from tRPC

DDinuma
View on Discord
10/14/2023
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. Code Context 
export const authRouter = router({
  email_login: publicProcedure
    .input(UserAuthFormSchema)
    .mutation(async (opts) => {
      await handleEmailLogin(opts.input.email, "baseURL");
      
      return {
        message: "Success"
      }
    })
})
export const authRouter = router({
  email_login: publicProcedure
    .input(UserAuthFormSchema)
    .mutation(async (opts) => {
      await handleEmailLogin(opts.input.email, "baseURL");
      
      return {
        message: "Success"
      }
    })
})
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. My current repo is 1:1 to jherr's nextjs App Router setup, except it has this auth router composing into the primary appRouter. https://github.com/jherr/trpc-on-the-app-router/tree/main/src/app I'm confused on how to override the fetchRouterHandler on the client side to properly pass through the req / res object. Attempt at making the context 
// @api-server/context.ts
export async function createContext(opts: CreateNextContextOptions) {
  return {
    req: opts.req,
  };
}
// @api-server/context.ts
export async function createContext(opts: CreateNextContextOptions) {
  return {
    req: opts.req,
  };
}
// @/api-server/trpc.ts
import { 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.ts
import { 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,
    },
  });
});
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 change my trpc route handler appropriatly for the fetchRouter: /app/api/trpc/[trpc]/route.ts ```ts import { fetchRequestHandler } from "@trpc/server/adapters/fetch"; import { appRouter } from "@/api-server";...
Jump to solution
Solution
DDinuma
View on Discord
10/14/2023
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 change my trpc route handler appropriatly for the fetchRouter: /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 fetchRouteHandler

export 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 fetchRouteHandler

export default async function handler(req: Request) {
  return fetchRequestHandler({
    endpoint: "/api/trpc",
    router: appRouter,
    req: req,
    createContext: () => ({req}),
  })
}

export { handler as GET, handler as POST };

Looking for more? Join the community!

T
tRPC

Help Retrieving req.url from opts in useMutation from tRPC

Join Server
Recommended Posts
Express tRPC NextJSI've custom expressjs server with Nextjs + im using internal package for handling OneLogin (OIDC) hoDynamic links url dependent on next headers?Hi, We're currently explore if we can use trpc on a multi tenant next.js 13 application. But we cancalling TRPCProxyClient from inside trpc procedure fails on vercel route handlers edge runtimei setup my client as following: ``` export const serverToServerApi = createTRPCProxyClient<AppRouterPrivate procedures and serverside callsHello, I am just diving into trpc in my Next.js (app router) application and I am wondering if is thinferRouterOutputs ignore "complex data type" fields and only have primitive fields. Bug?Is this a bug ? I have done npx prisma db push, I have restarted VSCode and Typescript. Any commentsHow can i modify my URL using TRPCI did a simple pagination in react and trpc(a simple table), only problem is that: i want in my url TRPC EXPORT API TYPES BE to FEIs there a way I can automatically export my API types from the backend to the frontend? For examplehow to access body in middlewareHi, I’m using trpc with nextjs. Does anyone know how to access the request’s body in middleware? As