Swagger API in Gatsby

Let's add Swagger to a GatsbjyJS site. SwaggerUI does not have a handy Gatsby plugin or a React wrapper, but that's no problem.

Create a new Gatsby site

gatsby new gatsby-swagger

I deleted all non-essentials. I want a simple index page. Reference this repo to see everything I deleted.

Now we install some dependencies.

yarn add swagger-ui
yarn add react-helmet

Now let's add SwaggerUI to the window object.

// gatsby-browser.js
/**
 * Implement Gatsby's Browser APIs in this file.
 *
 * See: https://www.gatsbyjs.com/docs/browser-apis/
 */

import SwaggerUI from "swagger-ui";
window.SwaggerUI = SwaggerUI;

With that in place, we can create a component. Additionally, we want to add some custom styles.

// src/components/swagger.js
import React from "react";
import Helmet from "react-helmet";

export default class Swagger extends React.Component {
  componentDidMount() {
    const { componentId, url } = this.props;
    window.SwaggerUI({
      dom_id: `#${componentId}`,
      url: url,
    });
  }
  render() {
    return (
      <>
        <Helmet>
          // NOTE: I append /gatsby-swagger to support gitlab pages. // I'm sure
          there is a better way to do this
          <link
            href="/gatsby-swagger/swagger/theme-newspaper.css"
            rel="stylesheet"
          />
        </Helmet>
        <div id={this.props.componentId} />
      </>
    );
  }
}

Finally, we use the component.

// src/pages/index.js

import * as React from "react";
import Swagger from "../components/swagger";

const IndexPage = () => (
  <Swagger
    componentId="petstore-api"
    url="https://petstore.swagger.io/v2/swagger.json"
  />
);

export default IndexPage;

Copyright © 2020 Code Green LLC