In this full-stack tutorial blog series, you will learn how to build a Hackernews clone with GraphQL, Angular & Apollo Client. You will use angular-cli for the frontend and Graphcool for the backend. The tutorial series is all about the concepts of GraphQL and on how you can use it from within an Angular application. In this introductory post I’ll take you through a hands-on introduction of the GraphQL concept and the set-up.

Note: This is a cross-post from HowToGraphQL, a tutorial site covering a wide range of topics all around GraphQL.

Overview of the full app

So you are going to build a simple clone of Hackernews. Here’s a list of the features the app will have after you followed the entire tutorial series:

Display with 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)

Real-time updates when other users upvote a link or create a new one

To do this, you will use the following technologies for building the app:

Frontend:

Angular: Frontend framework for building user interfaces

Apollo Client: Fully-featured, production-ready caching GraphQL client

Backend:

Graphcool: Flexible backend platform combining GraphQL + Serverless

You will create the Angular project with angular-cli , a favorite command-line tool that gives you a blank project with all required build configuration already setup.

Why a GraphQL Client?

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 fantastic GraphQL clients out there?

There are a few GraphQL client libraries available. For straightforward use cases (such as writing scripts), graphql-request might already be enough for your needs. However, the 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, you pretty much have the choice between Apollo Client and Relay.

Apollo vs. Relay

The most common question heard from people that are getting started with GraphQL on the frontend, is which GraphQL client they should use. We’ll try to provide a few hints that’ll help you decide which of these clients is the right one for your next project!

Relay is Facebook’s homegrown GraphQL client that they open-sourced alongside GraphQL in 2015. It incorporates all the learnings that Facebook gathered since they started using GraphQL in 2012. Relay is heavily optimized for performance and tries to reduce network traffic where possible. An interesting side-note is that Relay itself started out as a routing framework that eventually got combined with data loading responsibilities. It thus evolved into a robust data management solution that can be used in Javascript apps to interface with GraphQL APIs.

The performance benefits of Relay come at the cost of a notable learning curve. Relay is a pretty complex framework and understanding all its bits and pieces requires some time to get into it. The overall situation in that respect has improved with the release of the 1.0 version, called Relay Modern. But if you’re looking for something to just get started with GraphQL, Relay might not be the right choice just yet.

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 or Vue as well as early versions of iOS and Android clients. Apollo is production-ready and has handy features like caching, optimistic UI, subscription support and many more.

Since this is purely a frontend tutorial, you don’t want to spend too much time setting up the backend. This is why you use Graphcool, a service that provides a production-ready GraphQL API out-of-the-box.