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