GraphQL & Apollo


Natalia Tepluhina

Frontend developer (Angular & VueJS)


What is GraphQL?


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 Features


  • 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


GraphQL vs. REST

@N_Tepluhina more request


...and one more


GraphQL: all you need with one query


The Schema Definition Language


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


Query with arguments


Writing data with mutations


Using Fragments


Realtime updates with Subscriptions


GraphQL Disadvantages


  • 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


  • Incrementally adoptable

  • Universally compatible

  • Simple to get started with

  • Inspectable and understandable

  • Built for interactive apps

  • Small and flexible

  • Community driven

Apollo query example


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: '' }),
  cache: new InMemoryCache()

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

Time for some practice!


Useful links


GraphQL & Apollo

By Natalia Tepluhina

GraphQL & Apollo

  • 433
Loading comments...

More from Natalia Tepluhina