Graphql, REST and Apollo

GraphQL vs REST
Chris Noring
Google Developer Expert
Digital McKinsey
@chris _noring

Why should I care
Presentation Structure
How to wrap an API in GraphQL
REST GraphQL comparison

GET /user
POST /user
PUT /user
DELETE /user
GET /user/query..
Products
New resources needs to be added
Orders
Categories
…
Number of endpoints becomes really large, really fast

Resources needs to look different if we are dealing
with mobile or desktop
GET /users/1
data : {
ﬁrstname : ‘chris’,
}
GET /mobile/users/1
data : {
ﬁrstname : ‘chris’,
region : { url : ‘/regions/1’ }
}
Only the linkEagerly loaded
region : {
id : 1,
city : ‘Warsaw’,
country : ‘Poland’
}

Problem 2
Need for a uniﬁed way of asking for data
Twitter
Reddit
Github
Data Service
GraphQL
runtime
Frontend Query

Problem 3
Not the output I want

Mismatch in response
Mapping is needed
{ “data” : {
“name”,
“address” : “Warsaw”
}
}
class Person {
surname: string;
city: string,
}
Need to rename to avoid remapping in Frontend

Might need several endpoints
class Person {
fname : string;
surname: string;
address: string,
friends : [],
records : []
}
Might lead to multiple requests
api/people/1
api/people/1/friends
api/people/1/records

GraphQL
Lets the client specify what they need,
“content negotiation”
Easier to aggregate data from many sources
Uses a type system to describe data
Application layer query language
Multiple resources in a single request
Open sourced by Facebook in 2015

Schemas
Queries
Resolvers
Mutations

{
resource {
column,
column2
}
}
Query
data : {
resource {
column,
column2
}
}
Response

Query example
Given these resources
User ( id, name, age, address, orders) Order ( id, created, items )
OrderItem ( id, product, Quantity, Price ) Product ( id, Name )
Users {
name,
orders {
created,
items {
Quantity,
Price,
product {
Name
}
}
}
}
data : [{
‘John’,
orders : [{
‘2017-01-01’,
items : [{
Quantity : 3,
Price : 110,
Product : { Name : ‘DVD’ }
}]
}]
}]

Query with parameter
Users( email : ‘chris@chris.com’ ) {
…
}
SELECT …
FROM resource
WHERE email =‘chris@chris.com’

Query with operators
Users( email__contains : ‘chris’ ) {
}
is, not, lt, lte, gt, gte, contains, icontains, startswith, endswith,
iendswith, like, ilike

Define a schema
Resolving a query
Building a runtime is about the following
Define queries Define mutators
Create
Update
Delete

Runtime: hello world
import {
graphql,
GraphQLSchema,
GraphQLObjectType,
GraphQLString
} from 'graphql';
var schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'RootQueryType',
fields: {
hello: {
type: GraphQLString,
resolve() {
return 'world';
}
}
}
})
});
Define a schema
Define a query
Define a queryable field
Respond/Resolve what to answer
var query = '{ hello }';
graphql(schema, query).then(result => {
// prints { data : { “hello” : “world” } }
console.log(result);
});
Do the query

A more advanced schema
ﬁelds: {
hello: {
resolve() {
return 'world';
}
},
human : {
type : humanType,
resolve : () => getHuman()
}
}
})
});
function getHuman() {
return Promise.resolve(
return {
id : ‘1’,
description : ‘ a description’,
name : ‘john’
})
}
Our resolver should call
a db ideally
Resolver function
var humanType = new GraphQLObjectType({
name : 'Human',
ﬁelds : () => ({
id: { type: GraphQLString },
description : { type : GraphQLString },
name : { type : GraphQLString } }),
})
}
Complex type
var query = '{ human { name, description } }';
// prints { data : { “human” : { “name” : “john”, “description” : “a description” } } }
});
Do the query

Deﬁne and query a list type
ﬁelds: {
hello: {
resolve() {
return 'world';
}
},
human : {
type : humanType,
resolve : () => getHuman()
},
humans : {
type : new GraphQLList(humanType),
resolve : () => getHumans()
}
}
})
});
var query = '{ humans { name, description } }';
// prints { data : { “humans” : [
{ id: 1, name : ‘Luke’, description: ‘anakins son’ },
{ id: 2, name : ‘Vader’, description: ‘anakins?’},
{ id: 3, name : ‘Palpatine’, description: ‘anakins boss’ }] }
});
Do the query
function getHumans() {
return Promise.resolve(
[{
id: 1, name : ‘Luke’, description: ‘anakins son’
},
{
id: 2, name : ‘Vader’, description: ‘anakins?’
},
{
id: 3, name : ‘Palpatine’, description: ‘anakins boss’
}]
)
}

Resolve dependencies part I
Imagine the following schema
humans : {
type: new GraphQLList(humanType),
resolve : (root, {}) => {
return getHumans();
}
}
getHumans() {
const humans = [
{id :'1', name: 'Luke', description: 'Anakins son', friends : ['2'] },
{id :'2', name: 'Darth', description: 'Anakin', friends : ['3'] },
{id :'3', name: 'Palpatine', description: 'Anakins master', friends : [] }
];
return Promise.resolve( humans );
}
How to resolve these
ids into objects?

var humanType = new GraphQLObjectType({
name : 'Human',
ﬁelds : () => ({
id: { type: GraphQLString },
description : { type : GraphQLString, description : 'desc' },
name : { type : GraphQLString, description : 'name of person' },
}),
interfaces : [ characterInterface ]
})
Resolve dependencies part II
Resolve
function getFriends(character) {
return character.friends.map( f => getHuman(f) );
}
Lookup by id
friends : {
type: new GraphQLList(humanType),
resolve : human => getFriends( human )
}

Query with an argument
human : {
type : humanType,
args : {
id: {
description: 'id of the jedi',
type: new GraphQLNonNull(GraphQLString)
}
},
resolve: (root, { id }) => getHumanById(id)
}
resolve, we dig out the id
and use it to query our resolver
var query = '{ human(id: 1) { name, description } }';
// prints { data : { “human( id: 1 )” : { “name” : “john”, “description” : “a description” } } }
});
Do the query
Resolver
Deﬁne args
function getHumanById(id) {
let result = return Promise.resolve(
[{
id: 1, name : ‘Luke’, description: ‘anakins son’
},
{
id: 2, name : ‘Vader’, description: ‘anakins?’
},
{
id: 3, name : ‘Palpatine’, description: ‘anakins boss’
}].ﬁlter( h => h.id === id );
return result.length === 0 ? null : result[0];
)
}

Alias = rename ﬁeld name in the query
query Test {
github {
userchris: user(username:"softchris") {
repos {
name
}
}
}
}
New value
Old value
“data” : {
“github” : {
“userchris” : {
“repos” : [{ “name” : “…”, … }]
}
}
}

Fragment is about cleaning up the code and make part of it
reusable
fragment UserDetail on GithubUser {
company: my_company,
avatar_url,
repos {
name,
commits {
message
}
}
}
query Github($user: String!, $repo: Boolean!) {
github {
user(username :$user) {
...UserDetail
}
}
}
We don’t need
to clutter the query
Update in one place when a ﬁeld needs to be added

Directive - Conditionally include / exclude
query ConditionalQuery($var: Boolean) {
otherField,
skipFieldPossibly @skip(if: $var)
}
Skip
query Github($user: String!, $repo: Boolean!) {
github {
user(username :$user) {
company,
avatar_url,
repos @include (if: $repo) {
name,
commits {
message
}
}
}
Include

Mutator - delete
function deleteArticle(id) {
return articleService.delete( id )
}
Resolver
export default new GraphQLSchema({
query: QueryType,
mutation: MutationType
});
Deﬁne in schema
mutation “Delete Article” {
deleteArticle(id:123) {
status
}
} Response back
Input argument
Call
var MutationType = new GraphQLObjectType({
name: ‘Deletetion Example',
description: ‘removing article',
ﬁelds: () => ({
deleteArticle: {
type: ArticleType,
description: 'Delete an article with id and return the article that was deleted.',
args: {
id: { type: new GraphQLNonNull(GraphQLInt) }
},
resolve: (value, { id }) => {
return deleteArticle(id);
}
}
}),
});

Mutator - create
var MutationType = new GraphQLObjectType({
name: 'GraphQL Mutations',
description: 'Mutations',
ﬁelds: () => ({
createArticle: {
type: ArticleType,
description: 'Create a new article',
args: {
article: { type: ArticleInputType }
},
resolve: (value, { article }) => {
return createArticle(article);
}
}
}),
});
function createArticle(article) {
return articleService.create( article )
}
Resolver
mutation “Create Article” {
createArticle(article: {
title : “Tomato”,
description : “Veggie”
}) {
status
}
Call

We have learned
Set up a schema
To deﬁne different types
Learned about resolvers
Mutators
Directives
Fragments
Aliases

What about consuming the
GraphQL?

{
"data": {
"humans": [
{ "name": “Luke", "description": "Anakins son”, "friends": [{ "name": “Darth" }],},
{ "name": “Darth", "description": “Anakin", "friends": [ { "name": “Palpatine" }],},
{ "name": "Palpatine","description": "Anakins master","friends": [],}
],
}
}
Content-Type: application/graphql
http://localhost:4000/graphql?
query={humans{name,description,friends{name}}}
GET

Inrementally adoptable
Universally compatible
Simple to get started with
Inspectable and understandable
Built for interactive apps
Small and ﬂexible
Community driven
GraphQL Client with integrations to all major frameworks

Also get Chrome plugin
https://chrome.google.com/webstore/detail/apollo-client-
developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm/related
npm install apollo-client graphql-tag --save
Install

http://graphql.org/swapi-graphql/
Star wars API wrapped in GraphQL
https://www.graphqlhub.com/
Social media such as Twitter, Github, Reddit etc.

Links
graphql-express
Learn to build your own API
https://github.com/softchris/graphql-express-demo
Or cheat and check out my repo :)
http://graphql.org/learn/
Ofﬁcial documentation

Summing up
Is GraphQL replacing REST? You can use both actually
REST has many endpoints
and HATEOAS
GraphQL has one endpoint
and content negotiation
REST is an architecture
concept
GraphQL is query
language + tools
GraphQL only asks for ﬁelds
it need
REST responds with a
whole object

Graphql, REST and Apollo

More Related Content

What's hot (20)

Similar to Graphql, REST and Apollo (20)

More from Christoffer Noring (20)

Recently uploaded (20)

Graphql, REST and Apollo