Help adding trpc-openapi to t3 app

Hi, can anyone help adding https://github.com/jlalmes/trpc-openapi properly to my existing t3 app? So far I have this

import { generateOpenApiDocument } from 'trpc-openapi';
import { appRouter } from './root';

export const openApiDocument = generateOpenApiDocument(appRouter, {
    title: 'tRPC OpenAPI - test',
    version: '1.0.0',
    baseUrl: 'http://localhost:3000/api',
});

import { generateOpenApiDocument } from 'trpc-openapi';
import { appRouter } from './root';

export const openApiDocument = generateOpenApiDocument(appRouter, {
    title: 'tRPC OpenAPI - test',
    version: '1.0.0',
    baseUrl: 'http://localhost:3000/api',
});

Here: server/api/openapi.ts And I added this sayHello example route to my router:

import { documentRouter } from "@/server/api/routers/document";
import { favoriteRouter } from "@/server/api/routers/favorite";
import { messageRouter } from "@/server/api/routers/message";
import { realEstateRouter } from '@/server/api/routers/real-estate';
import { userActivityRouter } from '@/server/api/routers/user-activity';
import { z } from "zod";
import { router, t } from './trpc';


/**
 * This is the primary router for your server.
 *
 * All routers added in /api/routers should be manually added here.
 */
export const appRouter = router({
  realEstate: realEstateRouter,
  document: documentRouter,
  userActivity: userActivityRouter,
  message: messageRouter,
  favorite: favoriteRouter,
  sayHello: t.procedure
    .meta({ /* 👉 */ openapi: { method: 'GET', path: '/say-hello' } })
    .input(z.object({ name: z.string() }))
    .output(z.object({ greeting: z.string() }))
    .query(({ input }) => {
      return { greeting: `Hello ${input.name}!` };
    }),
});

export type AppRouter = typeof appRouter;

import { documentRouter } from "@/server/api/routers/document";
import { favoriteRouter } from "@/server/api/routers/favorite";
import { messageRouter } from "@/server/api/routers/message";
import { realEstateRouter } from '@/server/api/routers/real-estate';
import { userActivityRouter } from '@/server/api/routers/user-activity';
import { z } from "zod";
import { router, t } from './trpc';


/**
 * This is the primary router for your server.
 *
 * All routers added in /api/routers should be manually added here.
 */
export const appRouter = router({
  realEstate: realEstateRouter,
  document: documentRouter,
  userActivity: userActivityRouter,
  message: messageRouter,
  favorite: favoriteRouter,
  sayHello: t.procedure
    .meta({ /* 👉 */ openapi: { method: 'GET', path: '/say-hello' } })
    .input(z.object({ name: z.string() }))
    .output(z.object({ greeting: z.string() }))
    .query(({ input }) => {
      return { greeting: `Hello ${input.name}!` };
    }),
});

export type AppRouter = typeof appRouter;

But I am confused, how I should resume and actually start it

GitHub

GitHub - jlalmes/trpc-openapi: OpenAPI support for tRPC 🧩

OpenAPI support for tRPC 🧩. Contribute to jlalmes/trpc-openapi development by creating an account on GitHub.

10 Replies

utdevOP•2y ago

The t3 app runs on http://localhost:3000, not even sure if the baseUrl should be the same url in the openApiDocument

cje•2y ago

have you tried following the steps on the github readme that you linked to

utdevOP•2y ago

@ccccjjjjeeee yes but I am a bit confused I am "stuck" at this step:

import http from 'http';
import { createOpenApiHttpHandler } from 'trpc-openapi';

import { appRouter } from '../appRouter';

const server = http.createServer(createOpenApiHttpHandler({ router: appRouter })); /* 👈 */

server.listen(3000);

import http from 'http';
import { createOpenApiHttpHandler } from 'trpc-openapi';

import { appRouter } from '../appRouter';

const server = http.createServer(createOpenApiHttpHandler({ router: appRouter })); /* 👈 */

server.listen(3000);

Where would I need to put it and also would it listen to the same port? 😕

cje•2y ago

That part is for express. They have examples for a bunch of backends in the repo https://github.com/jlalmes/trpc-openapi/tree/master/examples

GitHub

trpc-openapi/examples at master · jlalmes/trpc-openapi

OpenAPI support for tRPC 🧩. Contribute to jlalmes/trpc-openapi development by creating an account on GitHub.

Daher•2y ago

Hello there I cant run the openapi doc Im working with T3 but IM stuck on this step:

// pages/api/[...trpc].ts
import { createOpenApiNextHandler } from 'trpc-openapi';

import { appRouter } from '../../server/appRouter';

export default createOpenApiNextHandler({ router: appRouter });

// pages/api/[...trpc].ts
import { createOpenApiNextHandler } from 'trpc-openapi';

import { appRouter } from '../../server/appRouter';

export default createOpenApiNextHandler({ router: appRouter });

because the t3 file is pretty different and Im stuck with the doc 😦 I follow every step (Skipping Express 😉 )

AlexAnarcho•12mo ago

I am stuck at the same point. The issue as I see it is this part in app/api/trpc/[trpc]/route.ts the handler for me is created like so (fresh t3 project)

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createContext(req),
    onError:
      env.NODE_ENV === "development"
        ? ({ path, error }) => {
            console.error(
              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
            );
          }
        : undefined,
  });

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createContext(req),
    onError:
      env.NODE_ENV === "development"
        ? ({ path, error }) => {
            console.error(
              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
            );
          }
        : undefined,
  });

I dont see what to replace here with the createOpenApiNextHandler (using app router btw)

Zion•12mo ago

pretty sure trpc-openapi is dead at this point. if you use v11 it wont work for sure, pretty sure that for the newer versions of v10 its also broken and t3 in app router uses v11 for trpc from what I remember

AlexAnarcho•12mo ago

oh... that kinda sucks. thanks for the reply tho!

viralgupta•11mo ago

Hey, is there any way to create a webhook with T3, or is making a standalone server/endpoint the only option? Excuse me if there is an obvious answer, new to t3

cje•11mo ago

easiest to just use a normal next.js api route you get no benefit from using trpc for a webhook

Gaming

Programming

Help adding trpc-openapi to t3 app