Google Developer Expert

Master of Ceremonies

International Speaker

Angular 2 Trainer

Community Leader

GraphQL

GraphQL co-authors

@schrockn

@leeb

@dlschafer

Lee Byron

Nick Schrock

Dan Schafer

GraphQL Timeline

2012

GraphQL created at Facebook

Support Mobile Native Teams

2015

Open sourced

First Specification

GraphQL.js

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
 }
}

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]

graph.cool

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

GraphQLHub.com

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

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