Generating and Integrating OpenAPI Services in a React App

We look at how to integrate an OpenAPI-generated service from the server, then use this generated service across a React TypeScript App.

Producing and consuming APIs from different sources is the bread and butter of every modern web application. On the client side, it’s the way we communicate with the server and constantly update the states of our application.

HTTP-served REST APIs are arguably the most common form of exchange at the moment. They provide an easy form of exchange in JSON format. We can easily communicate with the server through a simple curl or fetch.

I believe the integration and communication with the server should feel as intuitive as possible, however, and this becomes especially apparent after working with GraphQL and Apollo. Knowing exactly what service to call, how to call it, and what results to expect greatly improves efficiency and productivity for us frontend engineers.

In this tutorial, we will look at how to integrate an OpenAPI-generated service from the server, and then use this generated service across a React application. Using web frameworks like Django, Rails, Spring, or NestJS, we can easily produce OpenAPI definitions through our application code.

The OpenAPI Specification (formerly the Swagger Specification) is framework-agnostic, however, and can be used to generate information about routes, data types, etc. OpenAPI serves as a solid exchange format to help API metadata traverse between different languages.

Objectives of this tutorial

What should you take away from this post? Given an OpenAPI (JSON or YAML) endpoint, we would like to generate:

Interfaces for the data transfer objects (DTO) — i.e., interfaces for calling specific endpoints
Services we can use to interact with the APIs

The generated services should include all the exposed routes; all the data types they need for communication; an exhaustive list of all the required/optional parameters; and, importantly, the data types the calls return.

We’ll do this by having the server generate all the services for communicating with the endpoints. This provides three critical advantages for the frontend engineer:

Eliminates the need to write all the boilerplate code necessary for calling the APIs
Gives clarity to the client side on all the interactions the server can process
Transparency — the client will always know when a change has been made in the server

We will see all this firsthand by building a simple to-do list. Without further ado, let’s get to the more technical parts of the tutorial. Here’s an outline of what we’ll cover:

#react #openapi

Objectives of this tutorial

blog.logrocket.com

Generating and Integrating OpenAPI Services in a React App