1.2.0 β€’ Published 2 years ago

trpc-openapi v1.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

trpc-openapi

OpenAPI support for tRPC 🧩

  • Easy REST endpoints for your tRPC procedures.
  • Perfect for incremental adoption.
  • OpenAPI version 3.0.3.

Usage

1. Install trpc-openapi.

# npm
npm install trpc-openapi
# yarn
yarn add trpc-openapi

2. Add OpenApiMeta to your tRPC instance.

import { initTRPC } from '@trpc/server';
import { OpenApiMeta } from 'trpc-openapi';

const t = initTRPC.meta<OpenApiMeta>().create(); /* πŸ‘ˆ */

3. Enable openapi support for a procedure.

export const appRouter = t.router({
  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}!` };
    });
});

4. Generate an OpenAPI document.

import { generateOpenApiDocument } from 'trpc-openapi';

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

/* πŸ‘‡ */
export const openApiDocument = generateOpenApiDocument(appRouter, {
  title: 'tRPC OpenAPI',
  version: '1.0.0',
  baseUrl: 'http://localhost:3000',
});

5. Add an trpc-openapi handler to your app.

We currently support adapters for Express, Next.js, Serverless, Fastify, Nuxt & Node:HTTP.

Fetch, Cloudflare Workers & more soonβ„’, PRs are welcomed πŸ™Œ.

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

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

const server = http.createServer(createOpenApiHttpHandler({ router: appRouter })); /* πŸ‘ˆ */

server.listen(3000);

6. Profit πŸ€‘

// client.ts
const res = await fetch('http://localhost:3000/say-hello?name=James', { method: 'GET' });
const body = await res.json(); /* { greeting: 'Hello James!' } */

Requirements

Peer dependencies:

  • tRPC Server v10 (@trpc/server) must be installed.
  • Zod v3 (zod@^3.14.4) must be installed (recommended ^3.20.0).

For a procedure to support OpenAPI the following must be true:

  • Both input and output parsers are present AND use Zod validation.
  • Query input parsers extend Object<{ [string]: String | Number | BigInt | Date }> or Void.
  • Mutation input parsers extend Object<{ [string]: AnyType }> or Void.
  • meta.openapi.method is GET, POST, PATCH, PUT or DELETE.
  • meta.openapi.path is a string starting with /.
  • meta.openapi.path parameters exist in input parser as String | Number | BigInt | Date

Please note:

  • Data transformers (such as superjson) are ignored.
  • Trailing slashes are ignored.
  • Routing is case-insensitive.

HTTP Requests

Procedures with a GET/DELETE method will accept inputs via URL query parameters. Procedures with a POST/PATCH/PUT method will accept inputs via the request body with a application/json or application/x-www-form-urlencoded content type.

Path parameters

A procedure can accept a set of inputs via URL path parameters. You can add a path parameter to any OpenAPI procedure by using curly brackets around an input name as a path segment in the meta.openapi.path field.

Query parameters

Query & path parameter inputs are always accepted as a string. This library will attempt to coerce your input values to the following primitive types out of the box: number, boolean, bigint and date. If you wish to support others such as object, array etc. please use z.preprocess().

// Router
export const appRouter = t.router({
  sayHello: t.procedure
    .meta({ openapi: { method: 'GET', path: '/say-hello/{name}' /* πŸ‘ˆ */ } })
    .input(z.object({ name: z.string() /* πŸ‘ˆ */, greeting: z.string() }))
    .output(z.object({ greeting: z.string() }))
    .query(({ input }) => {
      return { greeting: `${input.greeting} ${input.name}!` };
    });
});

// Client
const res = await fetch('http://localhost:3000/say-hello/James?greeting=Hello' /* πŸ‘ˆ */, {
  method: 'GET',
});
const body = await res.json(); /* { greeting: 'Hello James!' } */

Request body

// Router
export const appRouter = t.router({
  sayHello: t.procedure
    .meta({ openapi: { method: 'POST', path: '/say-hello/{name}' /* πŸ‘ˆ */ } })
    .input(z.object({ name: z.string() /* πŸ‘ˆ */, greeting: z.string() }))
    .output(z.object({ greeting: z.string() }))
    .mutation(({ input }) => {
      return { greeting: `${input.greeting} ${input.name}!` };
    });
});

// Client
const res = await fetch('http://localhost:3000/say-hello/James' /* πŸ‘ˆ */, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ greeting: 'Hello' }),
});
const body = await res.json(); /* { greeting: 'Hello James!' } */

Custom headers

Any custom headers can be specified in the meta.openapi.headers array, these headers will not be validated on request. Please consider using Authorization for first-class OpenAPI auth/security support.

HTTP Responses

Status codes will be 200 by default for any successful requests. In the case of an error, the status code will be derived from the thrown TRPCError or fallback to 500.

You can modify the status code or headers for any response using the responseMeta function.

Please see error status codes here.

Authorization

To create protected endpoints, add protect: true to the meta.openapi object of each tRPC procedure. By default, you can then authenticate each request with the createContext function using the Authorization header with the Bearer scheme. If you wish to authenticate requests using a different/additional methods (such as custom headers, or cookies) this can be overwritten by specifying securitySchemes object.

Explore a complete example here.

Server

import { TRPCError, initTRPC } from '@trpc/server';
import { OpenApiMeta } from 'trpc-openapi';

type User = { id: string; name: string };

const users: User[] = [
  {
    id: 'usr_123',
    name: 'James',
  },
];

export type Context = { user: User | null };

export const createContext = async ({ req, res }): Promise<Context> => {
  let user: User | null = null;
  if (req.headers.authorization) {
    const userId = req.headers.authorization.split(' ')[1];
    user = users.find((_user) => _user.id === userId);
  }
  return { user };
};

const t = initTRPC.context<Context>().meta<OpenApiMeta>().create();

export const appRouter = t.router({
  sayHello: t.procedure
    .meta({ openapi: { method: 'GET', path: '/say-hello', protect: true /* πŸ‘ˆ */ } })
    .input(z.void()) // no input expected
    .output(z.object({ greeting: z.string() }))
    .query(({ input, ctx }) => {
      if (!ctx.user) {
        throw new TRPCError({ message: 'User not found', code: 'UNAUTHORIZED' });
      }
      return { greeting: `Hello ${ctx.user.name}!` };
    }),
});

Client

const res = await fetch('http://localhost:3000/say-hello', {
  method: 'GET',
  headers: { Authorization: 'Bearer usr_123' } /* πŸ‘ˆ */,
});
const body = await res.json(); /* { greeting: 'Hello James!' } */

Examples

For advanced use-cases, please find examples in our complete test suite.

With Express

Please see full example here.

import { createExpressMiddleware } from '@trpc/server/adapters/express';
import express from 'express';
import { createOpenApiExpressMiddleware } from 'trpc-openapi';

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

const app = express();

app.use('/api/trpc', createExpressMiddleware({ router: appRouter }));
app.use('/api', createOpenApiExpressMiddleware({ router: appRouter })); /* πŸ‘ˆ */

app.listen(3000);

With Next.js

Please see full example here.

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

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

export default createOpenApiNextHandler({ router: appRouter });

With AWS Lambda

Please see full example here.

import { createOpenApiAwsLambdaHandler } from 'trpc-openapi';

import { appRouter } from './appRouter';

export const openApi = createOpenApiAwsLambdaHandler({ router: appRouter });

With Fastify

Please see full example here.

import { fastifyTRPCPlugin } from '@trpc/server/adapters/fastify';
import Fastify from 'fastify';
import { fastifyTRPCOpenApiPlugin } from 'trpc-openapi';

import { appRouter } from './router';

const fastify = Fastify();

async function main() {
  await fastify.register(fastifyTRPCPlugin, { router: appRouter });
  await fastify.register(fastifyTRPCOpenApiPlugin, { router: appRouter }); /* πŸ‘ˆ */

  await fastify.listen({ port: 3000 });
}

main();

Types

GenerateOpenApiDocumentOptions

Please see full typings here.

PropertyTypeDescriptionRequired
titlestringThe title of the API.true
descriptionstringA short description of the API.false
versionstringThe version of the OpenAPI document.true
baseUrlstringThe base URL of the target server.true
docsUrlstringA URL to any external documentation.false
tagsstring[]A list for ordering endpoint groups.false
securitySchemesRecord<string, SecuritySchemeObject>Defaults to Authorization header with Bearer schemefalse

OpenApiMeta

Please see full typings here.

PropertyTypeDescriptionRequiredDefault
enabledbooleanExposes this procedure to trpc-openapi adapters and on the OpenAPI document.falsetrue
methodHttpMethodHTTP method this endpoint is exposed on. Value can be GET, POST, PATCH, PUT or DELETE.trueundefined
pathstringPathname this endpoint is exposed on. Value must start with /, specify path parameters using {}.trueundefined
protectbooleanRequires this endpoint to use a security scheme.falsefalse
summarystringA short summary of the endpoint included in the OpenAPI document.falseundefined
descriptionstringA verbose description of the endpoint included in the OpenAPI document.falseundefined
tagsstring[]A list of tags used for logical grouping of endpoints in the OpenAPI document.falseundefined
headersParameterObject[]An array of custom headers to add for this endpoint in the OpenAPI document.falseundefined
contentTypesContentType[]A set of content types specified as accepted in the OpenAPI document.false['application/json']
deprecatedbooleanWhether or not to mark an endpoint as deprecatedfalsefalse

CreateOpenApiNodeHttpHandlerOptions

Please see full typings here.

PropertyTypeDescriptionRequired
routerRouterYour application tRPC router.true
createContextFunctionPasses contextual (ctx) data to procedure resolvers.false
responseMetaFunctionReturns any modifications to statusCode & headers.false
onErrorFunctionCalled if error occurs inside handler.false
maxBodySizenumberMaximum request body size in bytes (default: 100kb).false

Still using tRPC v9? See our .interop() example.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

James Berry - Follow me on Twitter @jlalmes πŸ’š

1.2.0

2 years ago

1.1.2

2 years ago

1.0.0

2 years ago

1.0.0-alpha.4

2 years ago

1.0.0-alpha.3

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.0-alpha.2

2 years ago

1.0.0-alpha.1

2 years ago

1.0.0-alpha.0

2 years ago

0.7.0

2 years ago

0.6.1

2 years ago

0.1.0-alpha.10

3 years ago

0.1.0-alpha.12

3 years ago

0.1.0-alpha.11

3 years ago

0.1.0-alpha.14

3 years ago

0.1.0-alpha.13

3 years ago

0.1.0-alpha.16

3 years ago

0.1.0-alpha.15

3 years ago

0.1.0-alpha.18

3 years ago

0.1.0-alpha.17

3 years ago

0.1.0-alpha.19

3 years ago

0.2.1-alpha.0

2 years ago

0.1.0-alpha.21

3 years ago

0.1.0-alpha.20

3 years ago

0.1.0-alpha.23

3 years ago

0.1.0-alpha.22

3 years ago

0.1.0-alpha.9

3 years ago

0.1.0-alpha.8

3 years ago

0.1.0

3 years ago

0.1.0-alpha.5

3 years ago

0.1.0-alpha.4

3 years ago

0.3.0

2 years ago

0.1.2

2 years ago

0.1.1-alpha.2

3 years ago

0.1.0-alpha.7

3 years ago

0.1.1

3 years ago

0.2.0

3 years ago

0.1.1-alpha.1

3 years ago

0.1.0-alpha.6

3 years ago

0.1.0-alpha.1

3 years ago

0.1.0-alpha.3

3 years ago

0.1.0-alpha.2

3 years ago

0.1.3-alpha.0

2 years ago

0.5.0

2 years ago

0.4.0

2 years ago

0.2.2

2 years ago

0.1.3

2 years ago

0.6.0

2 years ago

0.0.1

3 years ago