You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: openapi/frameworks/trpc.mdx
+62-53Lines changed: 62 additions & 53 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,37 +8,35 @@ import { Callout } from "@/mdx/components";
8
8
# How to generate OpenAPI with tRPC
9
9
10
10
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.
13
13
14
14
The guide covers:
15
15
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)).
18
18
- Improving the generated OpenAPI for better use across the API lifecycle and
19
19
specifically SDK generation.
20
20
- Using the Speakeasy CLI to create an SDK based on the generated OpenAPI.
21
21
22
-
<Callouttitle="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
-
29
22
## Introduction
30
23
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.
35
27
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.
39
35
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.
42
40
43
41
Finally, this process is added to a CI/CD pipeline so that Speakeasy
44
42
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.
47
45
48
46
To follow along with this tutorial, the following are needed:
49
47
50
-
- An existing tRPC app, or the example application can be cloned.
51
48
- Some familiarity with tRPC.
52
49
-[Node.js](https://nodejs.org/en/download) (Node 26.3.0 was used here).
53
50
-[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
+
<Callouttitle="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>
54
59
55
60
The specific versions will change over time, but these are the versions used in
56
61
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.
83
88
84
89
## Adding easy REST-like endpoints to tRPC procedures
85
90
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
87
92
to tRPC procedures, and generating an OpenAPI document for these endpoints.
88
93
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.
95
100
96
101
First step, install `trpc-to-openapi`:
97
102
@@ -198,10 +203,10 @@ directly, and getting it ready for OpenAPI to pick that up and add more context.
198
203
## Configure OpenAPI from source code
199
204
200
205
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.
205
210
206
211
OpenAPI requires a little bit more than just a list of HTTP methods and paths,
207
212
so the next step is to add some basic information about the API to the OpenAPI
@@ -243,7 +248,7 @@ like:
243
248
}
244
249
```
245
250
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
247
252
script to save it to a file so other tools can work with it.
248
253
249
254
```json filename="package.json"
@@ -260,7 +265,7 @@ From now on, an OpenAPI document can be generated by running `npm run generate-o
260
265
261
266
The team over at [Scalar](https://scalar.com/) have built a fantastic CLI and
262
267
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.
264
269
265
270
```json
266
271
{
@@ -368,11 +373,15 @@ Run `npm run generate-openapi` and see how this information is added to the Open
368
373
369
374
## Improving the OpenAPI paths
370
375
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.
372
380
373
381
### Expanding the procedure's input and output schemas
374
382
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.
376
385
377
386
Create a new file called `shared/models.ts` and specify a `Station` model using Zod:
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.
0 commit comments