❓-help

Next.js app router catch-all HTTP methods

GGrifn

7/17/2023

The app router already supports the catch-all file for route resolution, but AFAIK still expects separately method exports like export function GET(). I think this means we can't provide the tRPC NextApiHandler from the app router and we still need to use the pages directory (not a big deal but adding a whole extra directory just for the tRPC route currently). Any way to provide the tRPC Next handler from the app router?

JHJan Henning

7/18/2023

Hi. You can create a handler function and export it as both GET and POST. For example, here's how mine looks. Yours may look different, but the same thing applies to how you can export it 🙂

import { fetchRequestHandler } from "@trpc/server/adapters/fetch"
import { appRouter } from "~/server/routers/_app"
import { createContext } from "~/server/trpc"

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext
  })

export { handler as GET, handler as POST }

import { fetchRequestHandler } from "@trpc/server/adapters/fetch"
import { appRouter } from "~/server/routers/_app"
import { createContext } from "~/server/trpc"

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext
  })

export { handler as GET, handler as POST }

GGrifn

7/20/2023

So obvious 🤦‍♂️ thanks

Looking for more? Join the community!

❓-help

❓-help

Recommended Posts

TRPC Vanilla Client (T3 stack)I'm using the T3 stack (Next + TRPC + etc) and I'm trying to figure out how to do vanilla queries th Multiple Inputs on TRPC Procedure?Essentially I'm trying to pass a cart (array of objects) into a public procedure (doing so fine). I adapter for hono or hattip?we’ve got adapters for express, stand alone node and next. I wonder how easy would it be to make ad Keep getting 500 error response I can't figure outWith both queries and mutations I get back this response saying that there's html in the response an tRPC & redux toolkit queryNode 18, pnpm, ts, vite, toolkit. Cant find any proper info how to use tRPC with toolkit query; If I how can I globally set a "middleware" callback for all onErrors on my React Query calls?this is a little specific but Im struggling on it Im using the TRPC server as a BFF for my backend Upgrading from tRPC v9 and NextJS v12. Should I upgrade NextJS first or tRPC?I have an app built from the tRPC + NextJS + Prisma starter, and I'd like to upgrade from tRPC v9 an prefetchinfinite not working when inputs are differentIve been trying to figure out why prefetching doesnt work when the inputs are different between pref