Rammstein
Rammstein10mo ago

trpc openapi api memory problem

Hi Everyone, I am facing memory issues with trpc-openapi. I have a full-stack app in NextJS using TRPC. When I visit the /openapi route to visit the swagger documentation the server memory limit is reached and the server crashes. Please see attached images. Can someone please help me out with this? Thanks!
3 Replies
Rammstein
Rammstein10mo ago
Provide environment Information System: Cloud service provider: Render OS: 22.04.1-Ubuntu CPU: AMD EPYC 7R13 Processor Memory: 2.00 GB Binaries: Node: 18.12.1 Packages: @trpc/client: 10.5.0, @trpc/next:10.5.0, @trpc/react-query: 10.5.0, @trpc/server:10.5.0, next: 12.1.6, react: "18.1.0", swagger-ui-react:^4.15.5, trpc-openapi:^1.0.0, Code:
server/routers/_app.ts
import {router} from '../init';
import {userRouter} from "./user";
import {cloudmateRouter} from "./cloudmate";
import {workspaceRouter} from "./workspace";
import {channelRouter} from "./channel";
import {projectRouter} from "./project";
import {SMSRouter} from "./sms";
import {customFieldRouter} from "./customField";
import {EmailRouter} from "./email";
import {testRouter} from "./test";
import {microsoftRouter} from "./microsoft";
import {googleRouter} from "./google";
import {AsanaWebhookRouter} from "./asanaWebhook";
import {draftRouter} from "./draft";
import {taskRouter} from "./task";
import {organizationRouter} from "./organization";
import {commandRouter} from "./command";
import {eventFilterRouter} from "./eventFilter";
import {workerRouter} from "./worker";
import {exceptionRouter} from "./exception";

export const appRouter = router({
asanaWebhook:AsanaWebhookRouter,
channel: channelRouter,
cloudmate: cloudmateRouter,
command:commandRouter,
customField: customFieldRouter,
draft: draftRouter,
email: EmailRouter,
eventFilter:eventFilterRouter,
exception:exceptionRouter,
google: googleRouter,
microsoft: microsoftRouter,
organization:organizationRouter,
project: projectRouter,
sms: SMSRouter,
task: taskRouter,
test: testRouter,
user: userRouter,
worker:workerRouter,
workspace: workspaceRouter,
});

export type AppRouter = typeof appRouter;
server/routers/_app.ts
import {router} from '../init';
import {userRouter} from "./user";
import {cloudmateRouter} from "./cloudmate";
import {workspaceRouter} from "./workspace";
import {channelRouter} from "./channel";
import {projectRouter} from "./project";
import {SMSRouter} from "./sms";
import {customFieldRouter} from "./customField";
import {EmailRouter} from "./email";
import {testRouter} from "./test";
import {microsoftRouter} from "./microsoft";
import {googleRouter} from "./google";
import {AsanaWebhookRouter} from "./asanaWebhook";
import {draftRouter} from "./draft";
import {taskRouter} from "./task";
import {organizationRouter} from "./organization";
import {commandRouter} from "./command";
import {eventFilterRouter} from "./eventFilter";
import {workerRouter} from "./worker";
import {exceptionRouter} from "./exception";

export const appRouter = router({
asanaWebhook:AsanaWebhookRouter,
channel: channelRouter,
cloudmate: cloudmateRouter,
command:commandRouter,
customField: customFieldRouter,
draft: draftRouter,
email: EmailRouter,
eventFilter:eventFilterRouter,
exception:exceptionRouter,
google: googleRouter,
microsoft: microsoftRouter,
organization:organizationRouter,
project: projectRouter,
sms: SMSRouter,
task: taskRouter,
test: testRouter,
user: userRouter,
worker:workerRouter,
workspace: workspaceRouter,
});

export type AppRouter = typeof appRouter;
/pages/openapi.tsx
import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
import 'swagger-ui-react/swagger-ui.css';

const SwaggerUI = dynamic(() => {
return import("swagger-ui-react");
}, { ssr: false });

const OpenAPIPage: NextPage = () => {
// Serve Swagger UI with our OpenAPI schema
return <SwaggerUI url="/api/openapi.json" />;
};

export default OpenAPIPage;
import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
import 'swagger-ui-react/swagger-ui.css';

const SwaggerUI = dynamic(() => {
return import("swagger-ui-react");
}, { ssr: false });

const OpenAPIPage: NextPage = () => {
// Serve Swagger UI with our OpenAPI schema
return <SwaggerUI url="/api/openapi.json" />;
};

export default OpenAPIPage;
js /pages/api
import { NextApiRequest, NextApiResponse } from 'next';

import { openApiDocument } from '../../server/configs/openapi.config';

// Respond with our OpenAPI schema
const handler = (req: NextApiRequest, res: NextApiResponse) => {
res.status(200).send(openApiDocument);
};

export default handler;
import { NextApiRequest, NextApiResponse } from 'next';

import { openApiDocument } from '../../server/configs/openapi.config';

// Respond with our OpenAPI schema
const handler = (req: NextApiRequest, res: NextApiResponse) => {
res.status(200).send(openApiDocument);
};

export default handler;
pages/api/openapi/[...trpc].ts
import { NextApiRequest, NextApiResponse } from 'next';
import { createOpenApiNextHandler } from 'trpc-openapi';

import { appRouter} from '../../../server/routers/_app';
import {createContext} from '../../../server/context';


const handler = async (req: NextApiRequest, res: NextApiResponse) => {


// Handle incoming OpenAPI requests
return createOpenApiNextHandler({
router: appRouter,
createContext,
})(req, res);
};

export default handler;
import { NextApiRequest, NextApiResponse } from 'next';
import { createOpenApiNextHandler } from 'trpc-openapi';

import { appRouter} from '../../../server/routers/_app';
import {createContext} from '../../../server/context';


const handler = async (req: NextApiRequest, res: NextApiResponse) => {


// Handle incoming OpenAPI requests
return createOpenApiNextHandler({
router: appRouter,
createContext,
})(req, res);
};

export default handler;
js
Rammstein
Rammstein10mo ago
No description
No description
Rammstein
Rammstein10mo ago
Is there a way I can paginate/lazy load the /api/openapi.json?