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
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
Vue makes it approachable
3
vue-apollo
Demo
Guillaume Chau
@Akryum
github.com/Akryum
