Unleashing the power of GraphQL
slides.com/gerardsans | @gerardsans
Google Developer Expert
Master of Ceremonies
International Speaker
Angular 2 Trainer
Community Leader
800
500
GraphQL
GraphQL co-authors
Lee Byron
Nick Schrock
Dan Schafer
GraphQL Timeline
2012
GraphQL created at Facebook
Support Mobile Native Teams
2016
GitHub announces GraphQL API
First GraphQL Meetup in London
graphql.org
graphqlsummit.com
Apollo Optics
GraphQL Server
source: blog
Implementations
Query Language
// GET '/graphql'
{
user(name: "gsans") {
twitter
}
}
// result
{
"user": {
"twitter": "@gerardsans"
}
}
Who is using it?
GraphQL Schema
Type System
- Scalar Types: Int, Float, String, Boolean, ID
- Object Types: Todo
- Entry points: Query, Mutation, Subscription*
Schema Syntax
- Nullable: String, Todo
- Non-nullable: String!, Todo!
- Arrays: [String], [Todo]
Todos Schema (1/2)
schema {
query: Query,
mutation: Mutation
}
type Query {
allTodoes(skip: Int, take: Int): [Todo!]!
}
type Todo {
id: ID!
text: String!
complete: Boolean!
}
Todos Schema (2/2)
schema {
query: Query,
mutation: Mutation,
}
type Mutation {
createTodo(text: String!, complete: Boolean!): Todo
updateTodo(id: ID!, text: String, complete: Boolean): Todo
}
GraphiQL
demo
Apollo Client
GraphQL Server
source: blog
Dependencies
- JavaScript client for GraphQL (apollo-client)
- API to run queries and mutations (angular2-apollo)
- Template literal (graphql-tag)
Setup
// client.ts
import ApolloClient, { createNetworkInterface } from 'apollo-client';
export const client = new ApolloClient({
networkInterface: createNetworkInterface('https://api.graph.cool/ZZZ'),
});
Bootstrap
// app.module.ts
import { client } from 'apollo-client';
import { ApolloModule } from 'angular2-apollo';
import { App } from './app.component';
@NgModule({
imports: [
BrowserModule,
ApolloModule.withClient(client)
],
declarations: [ App ],
bootstrap: [ App ]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
Main APIs
- query (Observable)
- watchQuery (Observable)
- mutate (Observable)
- updateQueries (reducer)
query (Observable)
// app.component.ts
@Component({ ... })
export class App {
constructor(private apollo: Angular2Apollo){
let query$ = apollo.query({
query: gql`query todos {
allTodoes { id complete text } }`,
forceFetch: true
});
let subscription = query$.subscribe({
next: result => {
// result.data.allTodoes
},
error: error => {
console.log(`Error: ${error.message}`);
}
});
}
}
mutate (Observable)
// todo.component.ts
@Component({ ... })
export class Todo {
private onTodoClick(){
let toggle$ = this.apollo.mutate({
mutation: gql`
mutation toggleTodo($id: ID!, $complete: Boolean!) {
updateTodo(id: $id, complete: $complete) { id complete }
}`,
variables: { id: this.id, complete: !this.complete }
});
let subscription = toggle$.subscribe(
({ data }) => { // data.updateTodo.id }
);
}
}
watchQuery (Observable)
// todoList.component.ts
@Component({
template:
`<todo *ngFor="let todo of todos | async">{{todo.text}}</todo>`
})
class TodoList implements OnInit {
todos: ApolloQueryObservable<any>;
constructor(private apollo: Angular2Apollo) { }
ngOnInit() {
this.todos = this.apollo.watchQuery({ query: todosQuery })
.map(({data}) => data.allTodoes);
}
// onRefresh = this.data.refetch;
}
demo
Subscriptions
(Experimental)
GraphQL Server
source: blog
Dependencies
- Server side package to connect with the pub/sub system (graphql-subscriptions)
- WebSocket client + server (subscriptions-transport-ws)
Setup
// client.ts
import { Client } from 'subscriptions-transport-ws';
export const wsClient = new Client('ws://subscriptions.graph.cool/ZZZ', {
timeout: 10000
});
Posts Schema
schema {
query: Query,
mutation: Mutation,
subscription: Subscription
}
type Post {
id: ID!
description: String!
imageUrl: String!
}
type Mutation {
createPost(description: String!, imageUrl: String!): Post
}
type Subscription {
createPost(): Post
}
wsClient.subscribe
// feed.component.ts
wsClient.subscribe({
query: `subscription newPosts {
createPost { id description imageUrl }
}`,
variables: null
}, (err, res) => {
// res.createPost = { id: 34, description: 'woot', imageUrl: '...' }
// err = [{ message: 'Connection Timeout', stack: '...' }]
});
demo
Why use GraphQL?
Some reasons
- Declarative
- De-coupled from storage
- Validated and structured
- Facilitates Collaboration
- Super fast
Thanks!
Unleashing the power of GraphQL
By Gerard Sans
Unleashing the power of GraphQL
GraphQL is awesome! After only a year it has got a lot of attention from the community. Many implementations have emerged and it’s just getting better. Is GraphQL right for you? Is it a query language or runtime? In this talk I am going to take you from 0 to hero. ;)
- 6,539