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,11 +45,18 @@ 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
- The [Speakeasy CLI](/docs/speakeasy-cli/). The CLI creates the SDK once the
54
51
OpenAPI document has been generated.
52
+
- An existing tRPC app, or the [example application](https://github.com/speakeasy-api/examples) can be cloned.
53
+
54
+
<Callouttitle="Sample code"type="info">
55
+
Follow along with this guide using the sample code in the [Speakeasy examples
56
+
repository](https://github.com/speakeasy-api/examples/), with this code living
57
+
under <code>frameworks-trpc</code>. This sample code is based on a common OpenAPI
58
+
example: the [Train Travel API](https://github.com/bump-sh-examples/train-travel-api).
59
+
</Callout>
55
60
56
61
The specific versions will change over time, but these are the versions used in
57
62
this guide and the accompanying sample code:
@@ -84,15 +89,15 @@ make a huge difference as lots of tools work just fine with either version.
84
89
85
90
## Adding easy REST-like endpoints to tRPC procedures
86
91
87
-
The `trpc-to-openapi` library has two main features: adding REST-like endpoints
92
+
The `trpc-to-openapi` library has two main features: adding REST/RESTish endpoints
88
93
to tRPC procedures, and generating an OpenAPI document for these endpoints.
89
94
90
-
Why would you want to add REST-like endpoints to tRPC procedures? For the same
91
-
reason gRPC has the gRPC Gateway to turn services into REST-like endpoints: at
92
-
first some teams pick something expecting it only to be used by them, but later
93
-
they want to expose it to other teams or external developers. Adding REST-like
94
-
endpoints to tRPC procedures allows APIs to be opened up to a wide variety of
95
-
users who don't all want to learn tRPC.
95
+
Why would you want to add REST endpoints to tRPC procedures? For the same
96
+
reason gRPC has the [gRPC Gateway](/openapi/frameworks/grpc-gateway) to turn
97
+
services into REST endpoints: at first some teams pick something expecting
98
+
it only to be used by them, but later they want to expose it to other teams or
99
+
external developers. Adding REST endpoints to tRPC procedures allows APIs
100
+
to be opened up to a wide variety of users who don't all want to learn tRPC.
96
101
97
102
First step, install `trpc-to-openapi`:
98
103
@@ -199,10 +204,10 @@ directly, and getting it ready for OpenAPI to pick that up and add more context.
199
204
## Configure OpenAPI from source code
200
205
201
206
With this handy new REST-like API setup with minimal HTTP mapping, we can now
202
-
generate an OpenAPI document, and export it to something like `openapi.json` so
203
-
it can be used by an entire [ecosystem of API tooling](https://openapi.tools/)
204
-
for everything from mock servers and contract testing to API gateways and SDK
205
-
generation.
207
+
generate an OpenAPI document and export it to something like `openapi-spec.json`.
208
+
Once this files exists, it can be used by a [massive ecosystem of API
209
+
tooling](https://openapi.tools/)for everything from mock servers and contract
210
+
testing to API gateways and SDK generation.
206
211
207
212
OpenAPI requires a little bit more than just a list of HTTP methods and paths,
208
213
so the next step is to add some basic information about the API to the OpenAPI
@@ -244,7 +249,7 @@ like:
244
249
}
245
250
```
246
251
247
-
Staring into this void of JSON is not very useful, so let's make another handy
252
+
Staring directly into the void of JSON is not very useful, so let's make another handy
248
253
script to save it to a file so other tools can work with it.
249
254
250
255
```json filename="package.json"
@@ -261,7 +266,7 @@ From now on, an OpenAPI document can be generated by running `npm run generate-o
261
266
262
267
The team over at [Scalar](https://scalar.com/) have built a fantastic CLI and
263
268
documentation tool which can serve an OpenAPI document as a web app, using the
264
-
Stripe-like "three column" API documentation format.
269
+
popular Stripe-like "three column" API documentation format.
265
270
266
271
```json
267
272
{
@@ -369,11 +374,15 @@ Run `npm run generate-openapi` and see how this information is added to the Open
369
374
370
375
## Improving the OpenAPI paths
371
376
372
-
The OpenAPI document can be improved by adding fields to the procedure's input and output schemas, and by adding examples, documentation, and metadata.
377
+
With the generic information covered in the `intro` section, it's time to focus
378
+
on documenting the procedures (or in OpenAPI: operations), which is achieved by
379
+
adding more fields to the procedure's input and output schemas. The fields being
380
+
added cover examples, documentation, and metadata.
373
381
374
382
### Expanding the procedure's input and output schemas
375
383
376
-
Let's create a `Station` model and add a few field types to see how these are represented in the OpenAPI document.
384
+
Let's create a `Station` model and add a few field types to see how these are
385
+
represented in the OpenAPI document.
377
386
378
387
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.
421
+
Back in `server/router.ts`, import these models and update the procedure's input
422
+
and output schemas. In the example app, a mock database is also added.
0 commit comments