Your first GraphQL component

If you follow my musings surely you must know how enamored I am with GraphQL. Frequently asked questions I get aren’t really about how it works anymore, but rather:

How do I get started and build something?

Today I want to get you your first win. Today, let’s build a little UI Component who’s data is backed by a GraphQL API.

Since this is more of a front-end tutorial, we will be picking from a list of public GraphQL APIs.

There were many options for a public API here: https://github.com/APIs-guru/graphql-apis and what we go over here can apply to any of these! Though, with the latest announcement of the title of the new Star Wars movie, I think it’s fitting we use the Star Wars API (SWAPI, funny when GraphQL first came out, I kept asking people whats this SWAH-PEE thing. Yeah I’m dumb.)

I’m going to try to go step-by-step here, so try and follow along! The Repo Link is available at the end of this post.

Project Setup

Okay so to save ourselves a configuration nightmare, let’s use the wonderful (but slow :P) create-react-app

$ yarn global add create-react-app
$ create-react-app INSERT_YOUR_OWN_NAME

Okay now go watch a show, or do some burpees. This takes a while.

Done? Okay, let’s continue.

$ cd INSERT_YOUR_OWN_NAME