GraphQL, Apollo and Vue:

The Ultimate Stack

Guillaume Chau

Vue.js Core Team

We need better tools to build great apps

Why?

Today's apps can be complex

MongoDB

MySQL

Oracle

ERP

CRM

Vue

Angular

React

Micro-services

Redis

Android

iOS

Legacy custom apps

AWS

JavaScript

Java

C#

GraphQL solves problems
Apollo adds value
Vue makes it approachable

1
2
3

GraphQL solves problems

1

What is GraphQL?

Schema definition language

Query language

Community of tools

Strong typing

type Message {
  id: ID!
  content: String
  user: User
  date: Int
}

type User {
  id: ID!
  name: String
  email: String
  avatarUrl: String
}

type Query {
  messages: [Message]
}

Strong typing

Help prevent errors

Improve the debugging experience

More explicit API (auto Docs)

Query only the data you need

{
  messages {
    id
    content
    user {
      id
      name
    }
  }
}

{
  "data": {
    "messages": [
      {
        "id": "0",
        "content": "Are you enjoying the conference?",
        "user": {
          "id": "0",
          "name": "Anne"
        }
      },
      {
        "id": "1",
        "content": "Absolutely!",
        "user": {
          "id": "1",
          "name": "Yoan"
        }
      }
    ]
  }
}

Query only the data you need

Reduce transfer size

No waterfall requests

Get predictable data shape

Clear and simple structure

Evolve your API

Add new fields

Deprecate old ones

Who is using GraphQL?

Apollo adds value

2

What is Apollo?

Server tools

Feature-rich client

Strong community

Principles

By the community, for the community

Simplicity

Performance

Apollo Server

Apollo Server

import { createServer } from 'http'
import express from 'express'
import { makeExecutableSchema } from 'graphql-tools'
import { graphqlExpress } from 'apollo-server-express'

const typeDefs = `...`

const resolvers = {
  Query: {
    messages: (root, args, context) => database.questions()
  },
}

const schema = makeExecutableSchema({ typeDefs, resolvers })

const app = express()
app.use(GRAPHQL_ENDPOINT, graphqlExpress({ schema }))

const server = createServer(app)
server.listen(PORT)

Graphcool Yoga

import { GraphQLServer } from 'graphql-yoga'

const typeDefs = `...`

const resolvers = {
  Query: {
    messages: (root, args, context) => database.questions()
  },
}

const server = new GraphQLServer({ typeDefs, resolvers })
server.start()

Apollo Launchpad

https://launchpad.graphql.com/qmq0lmkj9p

Think JSFiddle but for a GraphQL API

Prototype a GraphQL schema in minutes

Apollo Engine

Apollo Engine

Monitoring with history

Performance tracing

Errors tracking

Schema inspect

Caching

Automatic persisted queries

1M requests per month free

Automatic Persisted Queries

Automatic Persisted Queries

Schema Stitching

Apollo Client

Query

Mutation

Subscription (Web socket)

.gql

Observable

query

Normalized Cache

Apollo Client

import { ApolloClient } from 'apollo-boost'

const client = new ApolloClient({ uri: '...' })

Apollo Devtools

Case studies

https://www.apollographql.com/docs/react/why-apollo.html#case-studies

Vue makes it approachable

3

vue-apollo

https://github.com/Akryum/vue-apollo

https://github.com/Akryum/vue-cli-plugin-apollo

Demo

Guillaume Chau

@Akryum

github.com/Akryum

Thank you!