Install Apollo Client

The Apollo Client library takes care of the communication with the GraphQL backend. In this tutorial, we're going to use Appolo Client 2, which was released just a week ago.

First, we'll install the apollo-client-preset package. This bundles all the Apollo Client packages we need into one.

$ npm install graphql apollo-client-preset --save

Next, we'll install the apollo-angular integration packages. These make it easier for us to use Apollo Client in Angular/Ionic apps. Hopefully these packages will be available as a stable release soon, but for now, we'll have to use the beta versions.

The code above initializes Apollo Client with the endpoint for the Simple API.

We're also instructing Apollo Client to use an in-memory cache for the data that is received from the backend. This is configurable so you can change it to another cache implementation like Hermes or even write your own one if needed.

Load the app again and you should now be able to select a category and see the items in it.

Download complete app source code

Enter your email address to download the source code for this tutorial.

Caching

We didn't write any code ourselves to cache the data from the server locally, but if you inspect the network traffic, you'll see that when we request the items per category, there is no new request sent off to the server.

This is because we configured Apollo to use the in-memory cache. Apollo caches the results based on the queries you send through it and the next time you execute the query it will give you the cached results.