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: 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.

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$ yarn add apollo-client react-apollo -S

Clone this repo:

$ yarn$ npm start

Nice! You’re all set on the GraphQL Server side.

So create-react-app sets up our project boilerplate.

Let’s navigate to App.js in the src directory.

The first thing we need to do to start sending GraphQL requests is setup a GraphQL Client and it’s networkInterface. All a networkInterface does is explain how your request will travel through the interwebs.

Here you can see we edit the our boilerplate to import ApolloClient and setup our GraphQL Client. With a couple lines of code we have a GraphQL client ready to go!

Next we import the ApolloProvider, similar to Provider in redux, the ApolloProvider is necessary for binding the client and its methods down in your component tree.

CTRL-S. Wow. Much pretty.

We’re gonna need a little help from a library called graphql-tag to make building queries to our GraphQL endpoint a whole lot easier.

$ yarn add graphql-tag

Swing on over to your server: http://localhost:3000/graphql which is the Graphiql interface for the Star Wars API. Play around here trying different queries out and when you’re ready, let’s continue.

Alright I hope you had fun. I sure did. Here’s the query I’m going with:

Okay so back in App.js let’s import our new library.

If you noticed that I literally copy and pasted my query into the `gql` template literal function, it really is that straightforward.

Okay so we have a GraphQL Client and our first query. All we need to do now is bind it to some piece of UI. I’m just going to make a list of people their names and their home worlds.

To do this we’re going to take advantage of one of Apollo’s view layer integrations: react-apollo

Now we have a PeopleContainer, essentially a higher order function that will give the data resolved from this query to any UI Component of our choosing. Let’s bind it to a component:

This is completely unrelated to GraphQL and resonates with UI Development itself. An idiomatic React application consists mostly of function components.

Function components have several key advantages:

  • They help prevent abuse of the setState() API, favoring props instead.
  • They encourage the “smart” vs. “dumb” component pattern.
  • They encourage code that is more reusable and modular.
  • They discourage giant, complicated components that do too many things.

Let’s build out a list of “People” and have the singular, “Person” a component as well.

Now if you load your page you should see something like this:

Wow! A Real UI that is powered by a Star Wars API!? We did it! We built your first GraphQL backed component. I’m so proud of you!

That wasn’t so bad was it? Building UI’s with GraphQL is such an enjoyable experience. We have literally cut down the required API surface area our UI needs to deal with! This allows people who love building great UXs focus on the things they love: BUILDING AMAZING PRODUCTS. The data concerns are handled with ease, and we all live happily ever after!

Here’s the full Repo!

Software Engineer at Workpop, Inc.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store