Piping in a Node API from Glitch to a React Frontend

Creating the frontend was the hardest part for me.

Not because I am unfamiliar with React per se, but consuming APIs in a React app was new to me.

All of this time programming and I have very little experience with the Fetch API¹ though I am rewriting my Wikipedia Viewer freeCodeCamp project (opens in a new tab) to use fetch. So getting the hang of how that works was a bit of a time waster.

The stack

I used CRA, or create-react-app, Shards UI (opens in a new tab)², and am currently trying to implement a spinner using React.lazy() and React.suspense.

Consuming the API

All I basically had to do was create the scaffold with npx create-react-app dummy-glitch-api and voila, a scaffold.

Creating each component was easy enough, and I consumed the API in the User component:

export class User extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: undefined,
      // isLoaded: false,
    };
  }
 
  componentDidMount() {
    fetch("https://faker-api.glitch.me/api/user")
      .then(res => res.json())
      .then(user => this.setState({ user }))
      .catch(err => console.log(err));
  }

This is basically fetching my API from the the api directory. The response is json and we wait for the response to finish.

In the App component, we create several User components so that each card has different data.

   <div>
      <User />
      <User />
      <User />
      <User />
      <User />
    </div>

This gives us what we want for the most part.

Loading spinner

This is where I am having difficulty. I started using it with plain old React from a year or two ago. Then I realized that React.lazy() and React.suspense exists.

The spinner is a work in progress but it is coming along.

Result

It is far too late at night and I am getting tired but I wanted to get these posts out.

You can find the resulting app at Faker Data (opens in a new tab) and you can visit the repo on GitHub (opens in a new tab) to poke around, fresh with a Deploy to Netlify button!