Introduction

Overview

NOTE: This tutorial uses the legacy version of Graphcool and will be updated soon to use the new Graphcool Framework. The CLI commands mentioned in tutorial are outdated, you can read more about the new CLI here. If you still want to go through this tutorial, you can install the old version of the CLI using npm install -g graphcool@0.4.

In the previous tutorials, you learned about major concepts and benefits of GraphQL. Now is the time to get your hands dirty and start out with an actual project!

You’re going to build a simple clone of Hackernews. Here’s a list of the features the app will have:

• Display a list of links
• Search the list of links
• Users can authenticate
• Authenticated users can create new links
• Authenticated users can upvote links (one vote per link and user)

In this track, you’ll use the following technologies for building the app:

• Frontend:

  • Ember: A framework for creating ambitious web applications.
  • Apollo Client: Fully-featured, production ready caching GraphQL client.

• Backend:

  • Graphcool: Flexible backend platform combining GraphQL + Serverless

You’ll create the Ember project with ember-cli, the command line interface for ambitious web applications. ember-cli will start you off with a blank project with all required build configuration already setup.

Why a GraphQL Client?

In the Clients section in the GraphQL part, you already covered the responsibilities of a GraphQL client on a higher level, now it’s time to get bit more concrete.

In short, you should use a GraphQL client for tasks that are repetitive and agnostic to the app you’re building. For example, being able to send queries and mutations without having to worry about lower-level networking details or maintaining a local cache. This is functionality that you’ll want in any frontend application that’s talking to a GraphQL server - why build it yourself if you can use one of the amazing GraphQL clients out there?

There are a few GraphQL client libraries available. For very simple use cases (such as writing scripts), graphql-request might already be enough for your needs. However, chances are that you’re writing a somewhat larger application where you want to benefit from caching, optimistic UI updates, and other handy features. In these cases, Apollo Client is the only solution that currently works with Ember.

Apollo Client

Apollo Client is a community-driven effort to build an easy-to-understand, flexible and powerful GraphQL client. Apollo has the ambition to build one library for every major development platform that people use to build web and mobile applications. Right now there is a JavaScript client with bindings for popular frameworks like React, Angular, Ember, and Vue as well as early versions of iOS and Android. Apollo is production-ready and has handy features like caching, optimistic UI, subscription support and many more.

ember-apollo-client

This tutorial will use the ember-apollo-client library which is an ember-cli add-on that exposes a service to interact with Apollo. ember-apollo-client is still in it’s infancy so not all Apollo features have been implemented. The most notable feature of which is subscriptions. This tutorial will be updated as features are added to the library, so continually check back for new sections!