GraphQL to Infinity
by Gerard Sans | @gerardsans
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5075430/3qUVl6M-_400x400__1_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5237430/White.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5237430/White.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5237430/White.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5393622/zenika.png)
SANS
GERARD
Google Developer Expert
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/4346612/1_2xKLZ6w42ujjp4d4Be6X6g2-magic__1_.png)
Google Developer Expert
International Speaker
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/4026400/6df7410fac6d0d2822d92d59484ba2d9.jpg)
Spoken at 104 events in 27 countries
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/4348163/Screen_Shot_2017-10-07_at_13.19.24.png)
Blogger
Blogger
Community Leader
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3077823/28311378825_756a12f091_o.jpg)
900
1.6K
Trainer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3077765/1-Kt1ieFXLC8wuwm-wt0sziQ__1_.jpeg)
Master of Ceremonies
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5195858/DYU0kTgXUAE6DkD.jpg)
Master of Ceremonies
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5195880/DWFY2MXXUAAhsns.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5195882/DWLJrsRW4AAu-FD.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5195877/DWJfYUcWsAATR2H_bf.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5195871/DZeu3qBWsAAkTdl__1_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3091031/Screen_Shot_2016-10-07_at_23.15.32.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3915020/DBE04UbXsAMwmzU.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3915021/34859725642_2cb24ea247_z.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3915023/34636330390_50c844e8ac_z.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3915056/35076212125_bbe45642dd_z.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3915058/34912260892_046f2f4874_z.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3915061/34688875100_abdbfb8741_z.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5347703/Screen_Shot_2018-10-10_at_15.33.08.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5347712/_gerardsans__1_.png)
GraphQL
2012
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3318697/facebookiphone1.png)
GraphQL created at Facebook
2014
Vue is released
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/4314171/Vue.png)
2015
GraphQL is open sourced
Relay Classic is open sourced
2016
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3422214/apollo-logo-DC7DD3C444-seeklogo.com.png)
New GraphQL website graphql.org
First GraphQL Summit
GitHub announces GraphQL API
2017
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3422214/apollo-logo-DC7DD3C444-seeklogo.com.png)
Relay Modern 1.0
Apollo Client 2.0
AWSAppSync
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5221248/app-sync.png)
2018
Prisma
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/4594148/imageedit_7_8524231795.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3422214/apollo-logo-DC7DD3C444-seeklogo.com.png)
Apollo Engine
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3422214/apollo-logo-DC7DD3C444-seeklogo.com.png)
Apollo Client 2.1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3830359/1-3xPJvmwsdp2ImfSAAdP2DA.png)
launchpad.graphql.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5221255/Screen_Shot_2018-09-01_at_08.53.43.png)
howtographql.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/4306600/Screen_Shot_2017-11-07_at_19.22.05.png)
Apollo Developer Tools
HandsUp App
handsup-vue.now.sh
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5221495/Screen_Shot_2018-09-01_at_11.39.41.png)
Solution Architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5221272/Architecture_HandsUp__1_.png)
HandsUp Schema
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/4066559/Screen_Shot_2017-08-23_at_15.15.57.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5221260/2x-AWS.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5221259/1_-9cqAy-kqcjRdMYwu6t1_w.gif)
AWSAppSync Console
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5221260/2x-AWS.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5221279/Flow_Diagrams_Reinvent_DeepDish_112617_CM_2.6baa23c6cda3a8510bfaff069f2375d955dd2ca6__1_.png)
Using AWSAppSync
AppSync Client
GraphQL Server
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3047451/1-PhhLy2A6FDimWPPVzTJT-Q.png)
source: blog
Dependencies
- JavaScript client for GraphQL (aws-appsync)
- Fork of Apollo Client
- API to run queries and mutations (vue-apollo)
- GraphQL loader (graphql-tag)
import Vue from 'vue'
import appsyncProvider from './appsync/client'
new Vue({
provide: appsyncProvider.provide(),
render: h => h(App)
}).$mount('#app')
src/app.component.ts
AWSAppSync Provider
src/main.js
import Vue from 'vue'
import AWSAppSyncClient from "aws-appsync"
import VueApollo from 'vue-apollo'
import appSyncConfig from './config'
Vue.use(VueApollo)
export default new VueApollo({
defaultClient: client
})
src/app.component.ts
AWSAppSync Setup
src/appsync/client.js
const client = new AWSAppSyncClient({
url: appSyncConfig.graphqlEndpoint,
region: appSyncConfig.region,
auth: {
type: appSyncConfig.authenticationType,
}
},{
defaultOptions: {
watchQuery: {
fetchPolicy: 'network-only',
}
}
})
src/app.component.ts
AWSAppSync Client
src/appsync/client.js
Queries
GraphQL Server
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3047451/1-PhhLy2A6FDimWPPVzTJT-Q.png)
source: blog
schema {
query: Query
mutation: Mutation
}
type Query {
getQuestion(id: ID!): Question
listQuestions: QuestionConnection
}
type Question {
id: ID!
body: String!
user: User
votes: [Vote!]
createdAt: AWSDateTime
}
GraphQL Schema
export const ListQuestions = gql`
query listQuestions {
questions: listQuestions {
items {
id
body
createdAt
}
}
}`
src/app.component.ts
List Questions - Query
src/appsync/graphql.js
<QuestionList :questions="questions.items"/>
import { ListQuestions } from './appsync/graphql'
export default {
name: 'app',
apollo: {
questions: {
query: () => ListQuestions,
}
},
}
src/app.component.ts
List Questions
src/App.vue
Mutations
GraphQL Server
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/3047451/1-PhhLy2A6FDimWPPVzTJT-Q.png)
source: blog
schema {
query: Query
mutation: Mutation
}
type Mutation {
createQuestion(body: String!): Question
}
GraphQL Schema
export const AddQuestion = gql`
mutation addQuestion($body: String!) {
createQuestion(input: {
body: $body,
}) {
id
body
createdAt
}
}
`
src/app.component.ts
Create Question - Mutation
src/appsync/graphql.js
const question = { body: this.text };
this.$apollo.mutate({
mutation: AddQuestion,
variables: question,
update: (store, { data: { createQuestion } }) => {
const data = store.readQuery({ query: ListQuestions })
data.questions.items.push(createQuestion)
store.writeQuery({ query: ListQuestions, data })
}
})
.then(() => {})
.catch(error => {})
src/app.component.ts
Create Question
src/components/AddQuestion.vue
export const AddVote = gql`
mutation addVote($question: ID!) {
createVote(input: {
question: $question,
}) {
id
questionId
}
}
`
src/app.component.ts
Vote - Mutation
src/appsync/graphql.js
Auth0
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5221548/mobile-api.png)
import auth0 from 'auth0-js'
export default class AuthService {
auth0 = new auth0.WebAuth({
domain: 'AUTH0_DOMAIN',
clientID: 'AUTH0_CLIENT_ID',
responseType: 'token id_token',
scope: 'openid',
})
login() {}
handleAuthentication() {}
setSession(authResult) {}
logout() {}
isAuthenticated() {}
}
src/app.component.ts
AuthService - Auth0
src/auth0/AuthService.js
import AuthService from './auth0/AuthService';
const auth = new AuthService();
const { login, logout, authenticated, authNotifier } = auth
export default {
data () {
authNotifier.on('authChange', authState => {
this.authenticated = authState.authenticated
})
return { auth, authenticated }
},
methods: { login, logout }
}
src/app.component.ts
Auth0 Setup
src/App.vue
More
Community
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/4782649/Screen_Shot_2018-04-08_at_12.18.48.png)
GraphQL Community
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/4431095/Hardcore_v2_128_128.png)
Conferences
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5221252/Screen_Shot_2018-09-01_at_08.49.26.png)
summit.graphql.com
Influencers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/4790290/JphRM0xk_400x400.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/4790292/vg53KaiP_400x400.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/4790296/N4-NLlZ0_400x400__2_.jpg)
Johannes Schickling
Peggy Rayzis
Sashko Stubailo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/4790299/owTdBnzU_400x400.jpg)
Nikolas Burk
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5393629/logo__23_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5393629/logo__23_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/5393629/logo__23_.png)
GraphQL to the Infinity
By Gerard Sans
GraphQL to the Infinity
The Apollo team just released the new version of the Apollo Client. There's already a lot of hype around the new architecture using a new modular and flexible approach. In this talk, we are going to put it to test it together with Vue covering inc. queries, mutations and real-time subscriptions. Buckle up!
- 2,530