GraphQL

Talk overview

• Quick introduction
• The type system
• Querying / mutating data
• Introspection
• Retrospection

Origin

• Developed at Facebook in 2012
• REST / custom endpoints / FQL
• Serves almost all of their mobile apps

{
    hero {
        name
    }
}

How does a query look like?

Formal specification

• Announcement at ReactConf in January
• Formal spec released at ReactConf in July
• https://facebook.github.io/graphql/
• Language and storage engine agnostic

The type system

• Strongly typed
• Types compose to a schema
• Schema sets entry points for queries & mutations

Formal definition (shorthand)

type Character {
  id: String
  name: String
  friends: [Character]
  homePlanet: String
}

JavaScript

var CharacterType = new GraphQLObjectType({
  name: 'Human',
  fields: () => ({
    id: {
      type: new GraphQLNonNull(GraphQLString)
    },
    name: {
      type: GraphQLString
    },
    friends: {
      type: new GraphQLList(CharacterType),
      resolve: (human) => human.friends.map(getFriend)
    },
    homePlanet: {
      type: GraphQLString
    },
  })
});

Querying data

{
  hero {
    name
    friends {
      name
    }
  }
}

Mutating data

mutation M {  
  updateUser(userId: "1" name: "Bjoern Brauer") {
    userId,
    name
  }
}

Introspection

• Inspect the whole schema
• Validation of queries
• Platform for powerful tools

Demo!

Retrospection

• No more over-/under-fetching of data
• Describe data dependencies naturally
• Works well with component hierachies (React.js)

Links

• http://graphql.org/ (docs, spec, official libraries)
• awesome-graphql (community maintained list)
• https://github.com/ZauberNerd/graphql-introduction
• writing-a-basic-api-with-graphql

Questions?