GraphQL & Apollo

Introduction

Natalia Tepluhina

Frontend developer (Angular & VueJS)

@N_Tepluhina

We are hiring!

https://scalac.io/join_us/

https://vuevixens.org/

What is GraphQL?

@N_Tepluhina

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.

- graphql.org -

GraphQL Features

@N_Tepluhina

  • Query your API to get exactly what you need

  • Access many resources on single request

  • Get predictable results with schema & type system

Companies using GraphQL

@N_Tepluhina

GraphQL vs. REST

@N_Tepluhina

...one more request

@N_Tepluhina

...and one more

@N_Tepluhina

GraphQL: all you need with one query

@N_Tepluhina

The Schema Definition Language

@N_Tepluhina

Basic Example

With a type relationship

type User {
  name: String!;
  age: Int!;
}
type Comment {
  title: String!;
  author: User!;
}

Scalar types

  • Int

  • Float

  • String

  • Boolean

  • Id

Fetching data with queries

@N_Tepluhina

Query with arguments

@N_Tepluhina

Writing data with mutations

@N_Tepluhina

Using Fragments

@N_Tepluhina

Realtime updates with Subscriptions

@N_Tepluhina

GraphQL Disadvantages

@N_Tepluhina

  • You need to learn how to set up GraphQL

  • You need to send the queries from the client => extra code in your client

  • You need to define the schema beforehand => extra work before you get results

  • You need to have a graphql endpoint on your server

  • Graphql queries are more bytes than simply going to a REST endpoint

  • The server needs to do more processing

Apollo Client

@N_Tepluhina

  • Incrementally adoptable

  • Universally compatible

  • Simple to get started with

  • Inspectable and understandable

  • Built for interactive apps

  • Small and flexible

  • Community driven

Apollo query example

@N_Tepluhina

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
  link: new HttpLink({ uri: 'https://q80vw8qjp.lp.gql.zone/graphql' }),
  cache: new InMemoryCache()
});

client.query({ query: gql`{ hello }` }).then(console.log);

Time for some practice!

@N_Tepluhina

Useful links

@N_Tepluhina