Skip to content

Commit be7b0f1

Browse files
committed
settled on unofficia trpc package instead of official alpha.
1 parent c0e4c01 commit be7b0f1

1 file changed

Lines changed: 62 additions & 53 deletions

File tree

openapi/frameworks/trpc.mdx

Lines changed: 62 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -8,37 +8,35 @@ import { Callout } from "@/mdx/components";
88
# How to generate OpenAPI with tRPC
99

1010
This tutorial explores how to add REST endpoints to [tRPC](https://trpc.io/)
11-
procedures, then generate an OpenAPI document for that API, and finally uses
12-
this document to create an SDK using Speakeasy.
11+
procedures, then turn all those convenient types into generated OpenAPI which
12+
can be used for all sorts of handy things like creating an SDK with Speakeasy.
1313

1414
The guide covers:
1515

16-
- Adding REST-like HTTP endpoints to a tRPC project and making OpenAPI v3.1 for
17-
it, all using [`trpc-to-openapi`](](https://github.com/mcampa/trpc-to-openapi)).
16+
- Adding REST-like HTTP endpoints to a tRPC project and making OpenAPI v3.1
17+
using [`trpc-to-openapi`](](https://github.com/mcampa/trpc-to-openapi)).
1818
- Improving the generated OpenAPI for better use across the API lifecycle and
1919
specifically SDK generation.
2020
- Using the Speakeasy CLI to create an SDK based on the generated OpenAPI.
2121

22-
<Callout title="Sample code" type="info">
23-
Follow along with this guide using the sample code in the [Speakeasy examples
24-
repository](https://github.com/speakeasy-api/examples/), with this code living
25-
under <code>frameworks-trpc</code>. This sample code is based on the common OpenAPI
26-
example: the [Train Travel API](https://github.com/bump-sh-examples/train-travel-api).
27-
</Callout>
28-
2922
## Introduction
3023

31-
tRPC does not natively export OpenAPI documents, but the
32-
[`trpc-to-openapi`](https://github.com/mcampa/trpc-to-openapi) package adds this
33-
functionality. The tutorial starts by adding `trpc-to-openapi` to a project, and
34-
then adds a script to generate an OpenAPI schema and save it as a file.
24+
tRPC does not natively export OpenAPI documents, but seeing as both tRPC and
25+
OpenAPI are focused on declaring types and operations it's not a huge task to
26+
turn one into the other.
3527

36-
The quality of the OpenAPI description will ultimately determine the quality of
37-
created SDKs and documentation, so this guide covers ways to improve the
38-
generated OpenAPI document.
28+
The [`trpc-to-openapi`](https://github.com/mcampa/trpc-to-openapi) package does
29+
exactly this, adding full OpenAPI support to tRPC. Hang on though, isn't OpenAPI
30+
meant to describe REST/RESTish APIs, not tRPC specifically? Well absolutely, the
31+
`trpc-to-openapi` creates a REST bridge for the tRPC procedures, making them
32+
accessible to the wider public allowing for more potential integrations on the
33+
same API, then describe it nicely to allow for documentation making that
34+
integration even easier.
3935

40-
With the new and improved OpenAPI document in hand, the next step is to create
41-
SDKs using Speakeasy.
36+
The quality of the generated OpenAPI will ultimately determine the quality of
37+
created SDKs and documentation, so this guide covers ways to improve the that
38+
OpenAPI by leveraging all sorts of handy features in tRPC, OpenAPI, and the
39+
integrations between the two.
4240

4341
Finally, this process is added to a CI/CD pipeline so that Speakeasy
4442
automatically creates fresh SDKs whenever the tRPC API changes in the future.
@@ -47,10 +45,17 @@ automatically creates fresh SDKs whenever the tRPC API changes in the future.
4745

4846
To follow along with this tutorial, the following are needed:
4947

50-
- An existing tRPC app, or the example application can be cloned.
5148
- Some familiarity with tRPC.
5249
- [Node.js](https://nodejs.org/en/download) (Node 26.3.0 was used here).
5350
- [Speakeasy CLI](/docs/speakeasy-reference/cli/getting-started) (to create the SDK)
51+
- An existing tRPC app, or the [example application](https://github.com/speakeasy-api/examples) can be cloned.
52+
53+
<Callout title="Sample code" type="info">
54+
Follow along with this guide using the sample code in the [Speakeasy examples
55+
repository](https://github.com/speakeasy-api/examples/), with this code living
56+
under <code>frameworks-trpc</code>. This sample code is based on a common OpenAPI
57+
example: the [Train Travel API](https://github.com/bump-sh-examples/train-travel-api).
58+
</Callout>
5459

5560
The specific versions will change over time, but these are the versions used in
5661
this guide and the accompanying sample code:
@@ -83,15 +88,15 @@ make a huge difference as lots of tools work just fine with either version.
8388

8489
## Adding easy REST-like endpoints to tRPC procedures
8590

86-
The `trpc-to-openapi` library has two main features: adding REST-like endpoints
91+
The `trpc-to-openapi` library has two main features: adding REST/RESTish endpoints
8792
to tRPC procedures, and generating an OpenAPI document for these endpoints.
8893

89-
Why would you want to add REST-like endpoints to tRPC procedures? For the same
90-
reason gRPC has the gRPC Gateway to turn services into REST-like endpoints: at
91-
first some teams pick something expecting it only to be used by them, but later
92-
they want to expose it to other teams or external developers. Adding REST-like
93-
endpoints to tRPC procedures allows APIs to be opened up to a wide variety of
94-
users who don't all want to learn tRPC.
94+
Why would you want to add REST endpoints to tRPC procedures? For the same
95+
reason gRPC has the [gRPC Gateway](/openapi/frameworks/grpc-gateway) to turn
96+
services into REST endpoints: at first some teams pick something expecting
97+
it only to be used by them, but later they want to expose it to other teams or
98+
external developers. Adding REST endpoints to tRPC procedures allows APIs
99+
to be opened up to a wide variety of users who don't all want to learn tRPC.
95100

96101
First step, install `trpc-to-openapi`:
97102

@@ -198,10 +203,10 @@ directly, and getting it ready for OpenAPI to pick that up and add more context.
198203
## Configure OpenAPI from source code
199204

200205
With this handy new REST-like API setup with minimal HTTP mapping, we can now
201-
generate an OpenAPI document, and export it to something like `openapi.json` so
202-
it can be used by an entire [ecosystem of API tooling](https://openapi.tools/)
203-
for everything from mock servers and contract testing to API gateways and SDK
204-
generation.
206+
generate an OpenAPI document and export it to something like `openapi-spec.json`.
207+
Once this files exists, it can be used by a [massive ecosystem of API
208+
tooling](https://openapi.tools/) for everything from mock servers and contract
209+
testing to API gateways and SDK generation.
205210

206211
OpenAPI requires a little bit more than just a list of HTTP methods and paths,
207212
so the next step is to add some basic information about the API to the OpenAPI
@@ -243,7 +248,7 @@ like:
243248
}
244249
```
245250

246-
Staring into this void of JSON is not very useful, so let's make another handy
251+
Staring directly into the void of JSON is not very useful, so let's make another handy
247252
script to save it to a file so other tools can work with it.
248253

249254
```json filename="package.json"
@@ -260,7 +265,7 @@ From now on, an OpenAPI document can be generated by running `npm run generate-o
260265

261266
The team over at [Scalar](https://scalar.com/) have built a fantastic CLI and
262267
documentation tool which can serve an OpenAPI document as a web app, using the
263-
Stripe-like "three column" API documentation format.
268+
popular Stripe-like "three column" API documentation format.
264269

265270
```json
266271
{
@@ -368,11 +373,15 @@ Run `npm run generate-openapi` and see how this information is added to the Open
368373

369374
## Improving the OpenAPI paths
370375

371-
The OpenAPI document can be improved by adding fields to the procedure's input and output schemas, and by adding examples, documentation, and metadata.
376+
With the generic information covered in the `intro` section, it's time to focus
377+
on documenting the procedures (or in OpenAPI: operations), which is achieved by
378+
adding more fields to the procedure's input and output schemas. The fields being
379+
added cover examples, documentation, and metadata.
372380

373381
### Expanding the procedure's input and output schemas
374382

375-
Let's create a `Station` model and add a few field types to see how these are represented in the OpenAPI document.
383+
Let's create a `Station` model and add a few field types to see how these are
384+
represented in the OpenAPI document.
376385

377386
Create a new file called `shared/models.ts` and specify a `Station` model using Zod:
378387

@@ -408,7 +417,8 @@ export const StationSchema = z.object({
408417
export type Station = z.infer<typeof StationSchema>;
409418
```
410419

411-
Back in `server/router.ts`, import these models and update the procedure's input and output schemas. In the example app, a mock database is also added.
420+
Back in `server/router.ts`, import these models and update the procedure's input
421+
and output schemas. In the example app, a mock database is also added.
412422

413423
```typescript filename="server/router.ts"
414424
import { initTRPC } from "@trpc/server";
@@ -446,7 +456,8 @@ export const appRouter = t.router({
446456
});
447457
```
448458

449-
After the OpenAPI document is regenerated, the `Station` model is included in the document with all of its fields:
459+
After the OpenAPI document is regenerated, the `Station` model is included in
460+
the document with all of its fields:
450461

451462
```json filename="openapi-spec.json"
452463
{
@@ -555,7 +566,7 @@ instead of being duplicated inline.
555566

556567
Under the hood, `trpc-to-openapi` uses the
557568
[`zod-openapi`](https://github.com/samchungy/zod-openapi) package to convert Zod
558-
schemas into OpenAPI schemas.
569+
schemas into OpenAPI documents.
559570

560571
### Adding a summary, description, examples, and tags to a procedure
561572

@@ -805,10 +816,6 @@ been added to the document.
805816

806817
## Why Speakeasy and tRPC?
807818

808-
tRPC's focus on type safety and developer experience sets it apart from other
809-
TypeScript API frameworks. By using TypeScript's type system along with a schema
810-
library like Zod, tRPC allows server and client code to share types.
811-
812819
One of tRPC's stated goals is to cut down on the need for codegen, but there is
813820
still a place for code generation in the tRPC ecosystem. While tRPC's [default
814821
client](https://trpc.io/docs/client/vanilla/setup) is useful for writing
@@ -817,14 +824,13 @@ internal clients in a monorepo where a client can import the server's
817824
by internal and external developers. Nor does tRPC's type-safety extend to SDKs
818825
in languages other than TypeScript.
819826

820-
Speakeasy can help create type-safe, production-ready SDKs for a tRPC API in
821-
various languages so that the API can be built with confidence that users will
822-
have a great developer experience.
827+
Speakeasy can help create type-safe, production-ready SDKs for a tRPC-base HTTP API in
828+
various languages, ensuring the released APIs will give users a great developer experience.
823829

824-
## How to create an SDK based on the OpenAPI spec
830+
## Create an SDK based on OpenAPI
825831

826-
After following the steps above, an OpenAPI spec is ready to use as the basis
827-
for a new SDK. Next, Speakeasy is used to create an SDK.
832+
After following the steps above, the OpenAPI document is ready to use as the basis
833+
for a new SDK.
828834

829835
In the root directory of the project, run the following:
830836

@@ -852,7 +858,10 @@ Generation Action and Workflows](/docs/workflow-reference) documentation.
852858

853859
## Alternative OpenAPI support in tRPC
854860

855-
The tRPC docs now include an OpenAPI page at
856-
[https://trpc.io/docs/openapi](https://trpc.io/docs/openapi). This guide does
857-
not use that approach yet because it is currently in alpha, so the examples here
858-
use `trpc-to-openapi` for a more established workflow.
861+
tRPC also has an official OpenAPI package, documented at
862+
[https://trpc.io/docs/openapi](https://trpc.io/docs/openapi) and implemented via
863+
`@trpc/openapi`. This is a valid option for teams that want to stay close to the
864+
official tRPC ecosystem, but it is still in alpha and the package API may still
865+
change as it matures. For that reason, the examples in this guide use
866+
`trpc-to-openapi`, which is a more established workflow today while still
867+
producing OpenAPI that works well with Speakeasy.

0 commit comments

Comments
 (0)