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
utdev
utdevโ€ข16mo ago
The t3 app runs on http://localhost:3000, not even sure if the baseUrl should be the same url in the openApiDocument
cje
cjeโ€ข16mo ago
have you tried following the steps on the github readme that you linked to
utdev
utdevโ€ข16mo 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
cjeโ€ข16mo 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
Daherโ€ข16mo 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
AlexAnarchoโ€ข10mo 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
Zionโ€ข10mo 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
AlexAnarchoโ€ข10mo ago
oh... that kinda sucks. thanks for the reply tho!
viralgupta
viralguptaโ€ข9mo 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
cjeโ€ข9mo ago
easiest to just use a normal next.js api route you get no benefit from using trpc for a webhook
Want results from more Discord servers?
Add your server