Ionic 4 + AppSync: Build a mobile app with a GraphQL backend - Part 1
A year ago I wrote a tutorial for building a GraphQL backend for an Ionic app with Graphcool.
Around the same time, Amazon Web Services (AWS) released their own GraphQL service called AWS AppSync. Amazon Web Services are widely used by many (big) companies and they offer more than 100 different types of services which you can use to create a complete backend for any type of app.
AWS offers free tiers for almost all their services so it's free to get started with AppSync.
In this tutorial series I'll give you an introduction to GraphQL and show you how to easily build an AppSync GraphQL API. Following that, we'll build a mobile app with Ionic 4 that uses this GraphQL API.
This tutorial is split up into these parts
Part 1 - Introduction to GraphQL & AWS AppSync (this post)
Part 2 - Create a GraphQL API
Part 3 - Add Ionic pages and GraphQL queries
Part 4 - Use GraphQL mutations in Ionic
Part 5 - Set up Authentication with Amazon Cognito
Part 6 - Add ElasticSearch to GraphQL API
By the end of this series, I hope you'll have a good understanding of GraphQL and the capabilities of AppSync. I'll assume you have some experience with either Ionic or Angular, but don't worry if you don't, we'll build the whole thing from scratch!
If you have absolutely no idea what Ionic is, you can learn more about it here.
What is GraphQL and why should I care about it?
GraphQL is a query language specification which was developed by Facebook in 2012 to build an API for their mobile apps that could handle the complexity of their data and still be easy to use.
Facebook then open sourced GraphQL in 2015 and it was adopted by other companies to replace their REST API's. Here is a list of companies that have already implemented GraphQL API's:
GraphQL vs REST
GraphQL gives you the ability to communicate in a more flexible way with a backend than a traditional REST API.
With REST you have multiple endpoints for querying resources whereas with GraphQL you have just one endpoint. You define in your GraphQL 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. This data could be coming from a SQL or NoSQL database, a file store, other API's, or any other source of data.
Let's have a quick look at an example: let's say you want to retrieve a blog post with all its comments and author 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 are defining what you want the backend to return with your request query. This means that you can get your data faster because it's only one roundtrip and you're only getting the data you actually need, so less bytes to transfer over the wire.
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. In the next part of this tutorial I'll show you how to create a simple schema.
GraphQL is only a specification, so in order to use it, you'll need a service to implement this specification. You can either create your own GraphQL service with something like Apollo Server and manage your own servers or you can go serverless by using a GraphQL service like AppSync.
OK, tell me more about AppSync
AppSync is a fully managed GraphQL service which uses other AWS services under the hood to store and get data, combine data from multiple sources, and run serverless functions. AppSync also supports real-time updates for your app with GraphQL subscriptions.
In this tutorial we will be using Amazon DynamoDB (NoSQL database) as the data store because that's supported by AppSync out-of-the-box.
However, can use other types of databases with Amazon Relational Database Service (RDS), it just means a bit more work because you will have to use AWS Lambda (serverless functions) to do the mapping from the GraphQL schema to the database.
You might think at this point that it's going to be a lot of work to create your GraphQL schema and set up all the backend resources, but I'm happy to tell you that there is a tool that will help you set up your entire GraphQL backend in minutes!
Supercharge your development workflow with AWS Amplify
AWS Amplify is an open source CLI tool which helps developers get started quickly with building AppSync API's and integrating them into their apps.
All you have to do is define the types and relationships in your schema and Amplify will generate the full schema with CRUDL queries and mutations and push that to your AWS account where the AppSync API will be created for you along with the DynamoDB tables.
The CLI doesn't only help you with setting up AppSync, here is a list of all the AWS services that are currently supported by Amplify:
- Authentication (Amazon Cognito)
- Storage (Amazon S3 & Amazon DynamoDB)
- Serverless Functions (AWS Lambda)
- GraphQL API (AWS AppSync)
- REST API (Amazon API Gateway)
- Analytics (Amazon Pinpoint)
- Hosting (Amazon S3 and Amazon CloudFront distribution)
- Notifications (Amazon Pinpoint)
- Chatbots (Amazon Lex)
Besides managing the AWS backend for your app, Amplify also helps you on the client side in your mobile and web apps.
Amplify automatically sets up the configuration for your AppSync endpoint and it can generate TypeScript classes for your GraphQL types. We also get a UI component for sign up/in which work with your backend out-of-the-box.
GraphQL client libraries
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.
Amplify comes with its own GraphQL client which we can use in our Ionic app, but it doesn't support offline usage and client-side caching.
We can also use the the official AWS AppSync JavaScript SDK which has a GraphQL client implementation that supports offline usage and caching.
The AppSync SDK uses Appolo Client under the hood which is a very popular GraphQL client built by the folks from Meteor. It's framework agnostic and there is an integration package for Angular, so it's easy to use in Ionic apps.
To keep things simple for now I'll only use the Amplify GraphQL client in this tutorial, but if you need caching/offline support have a look at the AppSync SDK.
If you want to learn more about Apollo Client, you can see how I used it in my tutorial series with Graphcool.
What's next?
In the next part I'll show you how to set up an AppSync API with the Amplify CLI and following that we'll create an Ionic app that uses this backend.
I hope this introduction got you excited about GraphQL and AppSync, if it didn't please let me know in the comments what you think. I can imagine GraphQL might not be the best solution for your use case, but I'd love to get your opinion and I want to make sure I'm explaining GraphQL in a way that's easy to understand.
If you've already used AppSync or other GraphQL services before and stumbled upon this post somehow, I would love to know what your experiences with it are.
Here are a couple of links to learn more about GraphQL:
- How To GraphQL - I really liked this one, it helped me get started with GraphQL
- Official GraphQL Docs