GraphQL, Apollo and Vue:
The Ultimate Stack
![](https://media.slid.es/uploads/638176/images/4613893/vue-apollo-mod.png)
![](https://media.slid.es/uploads/638176/images/3735740/avatar.jpg)
Guillaume Chau
Vue.js Core Team
We need better tools to build great apps
Why?
![](https://media.slid.es/uploads/638176/images/4615145/Capture_d_écran_du_2018-02-16_01.22.55.png)
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
![](https://media.slid.es/uploads/638176/images/3730506/pasted-from-clipboard.png)
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
![](https://media.slid.es/uploads/638176/images/4615102/rest-vs-graphql.png)
Evolve your API
Add new fields
Deprecate old ones
![](https://media.slid.es/uploads/638176/images/4615132/Capture_d_écran_du_2018-02-16_01.11.48.png)
Who is using GraphQL?
![](https://media.slid.es/uploads/638176/images/3730838/fb-art.png)
![](https://media.slid.es/uploads/638176/images/4614879/GitHub-Mark-Light-120px-plus.png)
![](https://media.slid.es/uploads/638176/images/4615218/pinterest.png)
![](https://media.slid.es/uploads/638176/images/4615219/shopify.png)
![](https://media.slid.es/uploads/638176/images/3405366/twitterbird_RGB.png)
Apollo adds value
2
What is Apollo?
Server tools
Feature-rich client
Strong community
![](https://media.slid.es/uploads/638176/images/4615188/apollo.jpg)
Principles
By the community, for the community
Simplicity
Performance
Apollo Server
![](https://media.slid.es/uploads/638176/images/4615180/ApolloServer_1_.png)
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
![](https://media.slid.es/uploads/638176/images/4615190/graphcool-logo.png)
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
![](https://media.slid.es/uploads/638176/images/4615194/apollo-engine-history.png)
Automatic Persisted Queries
![](https://media.slid.es/uploads/638176/images/4615211/apollo-engine-auto-persist1.png)
Automatic Persisted Queries
![](https://media.slid.es/uploads/638176/images/4615214/apollo-engine-auto-persist2.png)
Schema Stitching
![](https://media.slid.es/uploads/638176/images/4615233/schema-stitching.png)
Apollo Client
Query
Mutation
Subscription (Web socket)
.gql
Observable
query
![](https://media.slid.es/uploads/638176/images/3919283/redux-white.png)
Normalized Cache
Apollo Client
![](https://media.slid.es/uploads/638176/images/4615149/rocket_1f680.png)
import { ApolloClient } from 'apollo-boost'
const client = new ApolloClient({ uri: '...' })
Apollo Devtools
![](https://media.slid.es/uploads/638176/images/4615205/apollo-devtools.png)
Case studies
![](https://media.slid.es/uploads/638176/images/4615226/Symbol-New-York-Times.png)
![](https://media.slid.es/uploads/638176/images/4615237/express_coupons.jpg)
![](https://media.slid.es/uploads/638176/images/4615241/expo_logo.png)
![](https://media.slid.es/uploads/638176/images/4615243/MLS_logo__2014_.png)
![](https://media.slid.es/uploads/638176/images/4615244/2000px-KLM_logo.svg.png)
Vue makes it approachable
3
vue-apollo
Demo
![](https://media.slid.es/uploads/638176/images/3735740/avatar.jpg)
Guillaume Chau
![](https://media.slid.es/uploads/638176/images/3405366/twitterbird_RGB.png)
@Akryum
![](https://media.slid.es/uploads/638176/images/4614879/GitHub-Mark-Light-120px-plus.png)
github.com/Akryum
Thank you!
Apollo, GraphQL and Vue: The Ultimate Stack
By Guillaume Chau
Apollo, GraphQL and Vue: The Ultimate Stack
- 15,404