I am under the assumption that you already know what GraphQL is and why it’s awesome. If not, check out this article to tell you “Everything you need to know about GraphQL”

I’m working on a React Native application that lists restaurants around you, their menus which can be drilled down to the topping that you may have on your pizza.

The application was using a RESTful API. The API worked just fine without an issue. However, I wanted to use the same API for the website also (written in React). The API would have done just fine but it would have meant I would have two choices:

I would create endpoints that would bring all of the relevant data for the website and data will not be used on the mobile version I would create refined endpoints specifically for the mobile application which would mean the website will be making more calls

Anyway, seen as this was a personal project, I decided to try out GraphQL.

Premise

I’m going to create a small React application using the Apollo Client that utilizes a GraphQL API exposing Pokemon data (everyone loves Pokemon right?) Check out the published website here

My setup:

Node -v 10.5.0

NPM -v 6.1.0

VS Code

You can find the source code for this article here. You can skip right to “Cutting the chase”.

Let’s initialize our React application first using the following setup:

npm i -S react react-dom webpack webpack-cli

Next we add our dev dependencies:

npm i -D babel-core babel-loader babel-plugin-add-module-exports babel-plugin-transform-class-properties babel-plugin-transform-object-rest-spread babel-preset-env babel-preset-react html-webpack-plugin style-loader webpack-dev-server

The list looks extensive but most of them are for getting babel and webpack to work.

Let’s have a look at our .babelrc file:

and our webpack setup:

Add the index.js file at the root level:

and our index.html file also at the root level:

and finally our package.json should look something like this:

And that is it. We have our primitive React application. Now run npm start in your command line to be greeted.

Cutting the chase

Let’s get to GraphQL and Apollo (which is why you’re here right?)

Before we do that, let’s add our src folder to the root of the application which which where our application is going to live.

Let’s add our Apollo dependencies:

npm i -S apollo-boost react-apollo graphql graphql-tag

Read more about Apollo and the Apollo Client here.

In there we need to create 3 files: App.js, Pokedex.js and PokeDetail.js

Disclaimer: To keep this source focused on use of GraphQL and Apollo Client, I have taken a shortcut with the styling of the application and all of the styling is inline.

As you can see, the query is simple. We are utilizing the client that we have passed to the ApolloProvider (more on this later), from within the Query component.

The query prop is where we are writing our graphql query. We are requesting the first 10 Pokemon and retrieving the id, name, number and image (url).

I am taking in the pokemonSelected function which will be a callback function for when the user has selected a Pokemon from our list.

Similar to our Pokedex.js component, the PokeDetail.js component takes in a single id which is the id of the Pokemon in question and injects it into the query.

We define the query parameter $id: String! which states that the given parameter we are injecting is of type String and it is required. We then inject this field to our query using the variables prop.

Similarly here, we are are defining the data we want to be returned from this query.

Note: This makes this type of API so powerful as I’m able to use the same API for many different scenarios. I’m also able to extends the API without introducing breaking changes with ease.

Finally, to put it together, we create an App.js component which takes care of keeping track which Pokemon is being selected and how the web page is displayed.

If you run this now, nothing should happen. We still need to hook everything up. Let’s create our client (in the root of the project).

Disclaimer: I don’t own the graphql endpoint for this Pokemon API. If the API is down by the time you are reading this, contact me so that I can amend this article.

Finally, we will hook everything up in index.js

And there we go!

You should have something like this https://pokegraph.herokuapp.com

Find the full source on Github.