Next.js App Router

1// src/app/api/trpc-playground/route.ts
2import { appRouter } from '@/server'
3import { fetchHandler } from 'trpc-playground/handlers/fetch'
4
5const setupHandler = fetchHandler({
6  router: appRouter,
7  trpcApiEndpoint: '/api/trpc',
8  playgroundEndpoint: '/api/trpc-playground',
9})
10
11const handler = async (req: Request) => {
12  const playgroundHandler = await setupHandler
13  return await playgroundHandler(req)
14}
15
16export { handler as GET, handler as POST }

Next.js Pages Router

Example

1// pages/api/trpc-playground.ts
2import { NextApiHandler } from 'next'
3import { appRouter } from 'server/routers/_app'
4import { nextHandler } from 'trpc-playground/handlers/next'
5
6const setupHandler = nextHandler({
7  router: appRouter,
8  // tRPC api path, pages/api/trpc/[trpc].ts in this case
9  trpcApiEndpoint: '/api/trpc',
10  playgroundEndpoint: '/api/trpc-playground',
11  // uncomment this if you're using superjson
12  // request: {
13  //   superjson: true,
14  // },
15})
16
17const handler: NextApiHandler = async (req, res) => {
18  const playgroundHandler = await setupHandler
19  await playgroundHandler(req, res)
20}
21
22export default handler

Example

1// server.ts
2import * as trpcExpress from '@trpc/server/adapters/express'
3import express from 'express'
4import { expressHandler } from 'trpc-playground/handlers/express'
5import { appRouter } from './router'
6
7const runApp = async () => {
8  const app = express()
9
10  const trpcApiEndpoint = '/api/trpc'
11  const playgroundEndpoint = '/api/trpc-playground'
12
13  app.use(
14    trpcApiEndpoint,
15    trpcExpress.createExpressMiddleware({
16      router: appRouter,
17    }),
18  )
19
20  app.use(
21    playgroundEndpoint,
22    await expressHandler({
23      trpcApiEndpoint,
24      playgroundEndpoint,
25      router: appRouter,
26      // uncomment this if you're using superjson
27      // request: {
28      //   superjson: true,
29      // },
30    }),
31  )
32
33  app.listen(3000, () => {
34    console.log('listening at http://localhost:3000')
35  })
36}
37
38runApp()

trpc-nuxt

1// server/api/trpc-playground.ts
2
3import { h3Handler } from 'trpc-playground/handlers/h3'
4import { appRouter } from '~~/server/trpc/routers'
5
6export default defineLazyEventHandler(async () => {
7  const setupHandler = await h3Handler({
8    router: appRouter,
9    trpcApiEndpoint: '/api/trpc',
10    playgroundEndpoint: '/api/trpc-playground',
11    // uncomment this if you're using superjson
12    // request: {
13    //   superjson: true,
14    // },
15  })
16
17  return defineEventHandler(setupHandler)
18})