How To Build An Ionic App With A Graphcool Backend - Part 1

I was recently doing some research on GraphQL and came across Graphcool, a GraphQL Backend-as-a-Service platform.

After reading the information on their website I got the impression that they provided a solid all-in-one backend for apps, so I built a simple Ionic app to try out Graphcool's features.

In this tutorial series I'll show you how to build an Ionic app with a Graphcool backend and hopefully, by the end, you'll have a good understanding of GraphQL, the capabilities of Graphcool and how to use Apollo Client to connect to GraphQL backends.

This tutorial is split up into these parts

Part 1 - Introduction to GraphQL, Graphcool, and Apollo Client (this post)
Part 2 - Creating a Graphcool backend
Part 3 - Querying data in an Ionic app
Part 4 - Mutations in an Ionic app
Part 5 - Real-time subscriptions in an Ionic app

What is GraphQL?

GraphQL is a query language specification which was open sourced by Facebook in 2015.

Facebook started developing GraphQL in 2012 to build an API for their mobile apps that could handle the complexity of their data and still be easy to use.

Since GraphQL was open sourced, these companies have also implemented GraphQL API's: Github, Shopify, and more.

GraphQL gives you a more flexible way of communicating with a backend than REST.

With REST you have multiple endpoints for querying resources whereas with GraphQL you have just one endpoint and you define in your request exactly which data you want to receive back from the endpoint.

It's called GraphQL because it allows you to query graphs of data, you can get all the data you need with one request instead of having to send multiple requests.

Taking an example out of the Facebook world: let's say you want to retrieve a post with all its comments and author's details.

With a REST API, you'd have to send multiple requests to query the post, comments, and author details.

With a GraphQL API, you can get all this data in just one response from the backend because you're defining what you want the backend to return with your request query.

GraphQL Schemas

In order for a client to know which data it can query from the GraphQL backend, the backend provides a schema which is written using the GraphQL Schema Definition Language.

The schema is a data model, it describes the types of data in your application and the relationships between these types.

What is Graphcool?

GraphQL is only a specification, so in order to use it, you'll need a service to implement this specification.

You can create your own service or you can use a GraphQL Backend-as-a-Service (BaaS) provider like Graphcool.

Graphcool takes care of storing your data and provides a GraphQL endpoint for your application. All you have to do is define a schema on Graphcool and it will automatically generate functions to query and mutate your data.

If you require real-time updates in your app, you can use GraphQL subscriptions.

Graphcool also offers file storage, integration with third-party authentication providers, and serverless functions for running business logic so it's really an all-in-one backend solution for apps.

####Graphcool vs Firebase Firebase is quite popular as a backend for Ionic apps, but using it means that your application logic is tightly coupled to Firebase. If you need to migrate to a different backend in the future, it might not be easy to do.

Using Graphcool instead of Firebase could be more interesting in the long run because you can switch your backend to another GraphQL BaaS provider or even your own GraphQL server without having to change your client code.

I recommend you read this in-depth article about the differences between these 2 services: GraphQL vs Firebase.

What is Apollo Client?

You can communicate with a GraphQL backend from your client application through HTTP requests.

There is a bit of boilerplate involved in setting up these requests for your queries and mutations but to take make development easier, it's recommended to use a GraphQL client library in your app.

These libraries also take care of common client requirements like caching, optimistic UI, handling real-time updates with subscriptions, and more.

The most popular client libraries are open-source: Apollo Client and Relay Modern.

Relay is built by Facebook and mainly used in React and React-Native applications.

Apollo Client is built by the folks from Meteor. It's framework agnostic and there is an integration package for Angular, so it can easily be used in Ionic apps.

What's next?

In the next part I'll show you how to set up a Graphcool project with a schema and following that we'll create a simple Ionic app that uses this backend with the help of Apollo Client.