GraphQL and Apollo Client (step-by-step)

The most stuff about GraphQL, you will learn by doing - but below you can find some theoretical explanation what it is.

What is the GraphQL server?

IN SHORT: GraphQL is a query language which provides a common interface between the client and the server for data fetching and the data's mutations (insert a row, edit a row etc).

This new concept introduced by Facebook, helps you to make the fullstack development faster (GraphQL servers are written in many different backend languages as for example Go, PHP, JavaScript's Node or Elixir).

GRAPHQL ANALOGY #1: with SQL you can query the databse from the backend (for example you can make a SQL query in your PHP backend). GraphQL is similar concept, but you can make the query from the client-side to the backend side.

GRAPHQL ANALOGY #2: In the GraphQL server, you can do similar configurations like in your MySQL/PostgreSQL panel admin (for example: PhpMyAdmin). You describe your application data schema in GraphQL, the similar way (it's just an analogy) as in MySQL/PostgreSQL. After you have described your data schema, then you can query in order to fetch a record from the React's client-side application by using the GraphQL query language (the language itself is quite easy to learn, you will see later in the tutorial).

GraphQL-server-as-a-service with ScapHold

For the quick backend kick-off, we will use ScapHold.io (a referal link which provides you with $10 of free credits to use on their backend as a service platform) GraphQL-backend-as-a-service (later in our tutorial, you will also learn how to implement a GraphQL server from scratch with NodeJS).

We are done with implementation of the the client side's features (React+Redux). It's time to take care of the backend stuff. After we are done with it, we will also improve the client-side code in terms of connecting the client-side with the backend-side.

Next steps are:

  • 1) Setup a ScapHold account
  • 2) Create the GraphQL schema
  • 3) Install and start using the Apollo client (you will find the more detailed description about this library later in the tutorial)

GraphQL and Apollo Client Table Of Contents

React Poland 2017