T
tRPC

Set custom header for fetchRequestHandler

Set custom header for fetchRequestHandler

TTypedef3/21/2023
Is this possible? currently getting cors issue. Trying to use nextjs's edge function with trpc..
import { type NextRequest } from "next/server";
import { appRouter, createContext } from "api";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

export const config = {
runtime: "edge",
};

export default async function handler(req: NextRequest) {
if (req.method === "OPTIONS") {
return new Response(null, {
status: 200,
});
}

return fetchRequestHandler({
endpoint: "/api/trpc",
router: appRouter,
createContext,
req,
onError:
process.env.NODE_ENV === "development"
? ({ path, error }) => {
console.error(`[tRPC] failed on ${path}: ${error}`);
}
: undefined,
});
}
import { type NextRequest } from "next/server";
import { appRouter, createContext } from "api";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

export const config = {
runtime: "edge",
};

export default async function handler(req: NextRequest) {
if (req.method === "OPTIONS") {
return new Response(null, {
status: 200,
});
}

return fetchRequestHandler({
endpoint: "/api/trpc",
router: appRouter,
createContext,
req,
onError:
process.env.NODE_ENV === "development"
? ({ path, error }) => {
console.error(`[tRPC] failed on ${path}: ${error}`);
}
: undefined,
});
}
Nnlucas3/21/2023
You also need to set the cors response headers, it's not enough to just respond to an options request
TTypedef3/21/2023
yep i was wondering how i can do that with fetchRequestHandler or do i need to set it prior
Nnlucas3/21/2023
It's a fairly common problem, which is often solvable with the npm cors package to save yourself pain
TTypedef3/21/2023
cuz I can easily do it with serverless function like this:
TTypedef3/21/2023
but idk how to do it with edge
Nnlucas3/21/2023
Ah right edge, hm If there's a 1st party way with your edge provider, I'd use that But you can just set the response headers in your code I'm neither a Next or Edge user though unfortunately
TTypedef3/21/2023
how so, im using nextjs aswell .set function doesnt seem to work when using edge
Nnlucas3/21/2023
Honestly I'm not sure, I don't use this tech I'd look for an answer for your specific provider You might be able to modify the response before returning it tRPC generally doesn't deal with CORS stuff though, it's left up to you not to abstract too many things away
TTypedef3/24/2023
i see i just thought u can pass it through createContext although fetchRequestHandler seem to be getting its headers from the req directly Just submitted a pr about https://github.com/trpc/trpc/tree/main/examples/next-edge-runtime, it doesn't seem to work anymore. https://github.com/trpc/trpc/issues/4048 Fixed!

Looking for more? Join the community!

T
tRPC

Set custom header for fetchRequestHandler

Join Server
Recommended Posts
How to enforce usequery as NonNullableI have a custom hook with infinite query. I check for undefined at the app first render and then it How to call useQuery with params inside JSXHow can i achieve this? Thanks ``` export function MemberQueryList({ list }: Props) { function Sharing EnumOn the backend: I have colocated files with types and procedures (index.ts - procedures, schemas.ts Meta - unable to create default metaTrying to follow https://trpc.io/docs/server/metadata#default-meta-chaining-and-shallow-merging I setrpc/react-query batchingHi. How do you deal with batching? If I don't put any maxURLLength then I get an error 404 since it middleware error with minimal-react examplehello! I tried to use the minimal-react version, but I get an error - it says that `'middleware'` dohow to use the same Zod validation both client and server's procedure inputWhen submitting forms, I need the same validation. How to reduce the repeated code?pipe/unstable_pipeI cant seem to find it? according to the docs I can chain middlewares using pipe in v10 but the featImplementation of bi-directional cursor-based paginationI'm looking at the [example](https://trpc.io/docs/useInfiniteQuery#example-react-component) for `useHow to ignore `input` validation and just pass in an object with interfaces?For my input I just want to pass in an interface rather than using a Zod schema. Either that or if sWhere can I add a query key?I tried to follow as in useQuery from Tanstack, but Typescript started complaining ```js api.promptsasync inside link next handler possible ?Hey everyone, Today I had to do a bit of refactor, and I'm wondering something. I had to turn a syntRPC doesn't support redirectI use tRPC & @trpc/server/adapters/express. procdure.query({ctx: { res }} => { res.redirect('xxHow to get external key other than INPUT from RESTFUL request?SSO callback my api like api/trpc/user.login?token=abcCannot read properties of undefined (reading 'createTRPCReact')I'm trying to use it in an Astro project. https://github.com/Industrial/test-astro-solid/blob/main/application/octet-stream responseIm refactoring my old backend to trpc so far it was a pleasure and fairly straight forward process ❤Discriminated union handleHow Do I handle Input type if its discriminated union?? ``` export const batchTasksRouter = createHit external APIs ...I'm new to tRPC, I need to hit an external API (OpenAI) directly from the client-side. Can I still uCannot get subscription event to fireRipping my hair out here trying to get Websockets working with tRPC and Next. Everything seems to bHow to get response type depending on the input params?Simple example of a normal JS function with generics: ``` const example = <T extends unknown>(params