Your first GraphQL component

Abhi Aiyer
4 min readJan 29, 2017

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

Start the Server

Clone this repo:

$ yarn$ npm start

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

Setting Up Apollo Client

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.

--

--