![](https://s3.amazonaws.com/media-p.slid.es/uploads/1275776/images/7293472/pasted-from-clipboard.png)
Introduction to the dark force of
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1275776/images/7293472/pasted-from-clipboard.png)
Created by Facebook in 2012
Open sourced in 2015
GraphQL is a query language for your API
GraphQL is a PATTERN not a technology
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1275776/images/7303143/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1275776/images/7293472/pasted-from-clipboard.png)
Created by FB in 2012
Open sourced in 2015
GraphQL is a query language for your API
GraphQL is a PATTERN not a technology
GraphQL doesn't store data
GraphQL is a replacement for REST
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1275776/images/7293472/pasted-from-clipboard.png)
GraphQL is a replacement of REST
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1275776/images/7284687/darthvader.png)
Instarwarsgram
JSON injected in the UI
{
"data": {
"person": {
"name": "Darth Vader",
"birthYear": "41.9BBY",
"planet": {
"name": "Tatooine"
},
"movies": [
{ "title": "A New Hope" },
{ "title": "The Empire Strikes Back" },
{ "title": "Return of the Jedi" },
{ "title": "Revenge of the Sith" }
]
}
}
}
Person
{
"data": {
"person": {
"name": "Darth Vader",
"birthYear": "41.9BBY",
"planetId": 53,
"movieIds": [1, 2, 3, 6],
"saberColor"..
}
}
}
GET - /person/42
Then.. Planets & Movies
{
"data": {
"person": {
"name": "Darth Vader",
"birthYear": "41.9BBY",
"planetId": 53,
"movieIds": [1, 2, 3, 6],
"saberColor"...
},
}
}
GET - /person/42
GET - /planets/53
GET - /movies/1
GET - /movies/2
GET - /movies/3
GET - /movies/6
{
"data": {
"planet": {
"name": "Tatooine",
"positionX": "234.323",
"positionY...
},
}
}
{
"data": {
"movie": {
"title": "A New Hope",
},
}
}
{
"data": {
"movie": {
"title": "A New Hope",
},
}
}
{
"data": {
"movie": {
"title": "A New Hope",
},
}
}
{
"data": {
"movie": {
"id": 6
"title": "A New Hope",
"date": "19/10/1983",
"personIds"...
},
}
}
Result
GET - /person/42
GET - /planets/53
GET - /movies/1
GET - /movies/2
GET - /movies/3
GET - /movies/6
{
"data": {
"person": {
"name": "Darth Vader",
"birthYear": "41.9BBY",
"planet": {
"name": "Tatooine"
},
"movies": [
{ "title": "A New Hope" },
{ "title": "The Empire Strikes Back" },
{ "title": "Return of the Jedi" },
{ "title": "Revenge of the Sith" }
]
}
}
}
GET - /person/42
GET - /person/42/planets
GET - /person/42/movies
# Version "optimized"
other implementation
{
"data": {
"person": {
"name": "Darth Vader",
"birthYear": "41.9BBY",
"planet": {
"name": "Tatooine"
},
"movies": [
{ "title": "A New Hope" },
{ "title": "The Empire Strikes Back" },
{ "title": "Return of the Jedi" },
{ "title": "Revenge of the Sith" }
]
}
}
}
GET - /person/42
GET - /person/42/planets
GET - /person/42/movies
Over-fetching
{
"data": {
"person": {
"firstName": "Anakin",
"lastName": "Skywalker",
"name": "Darth Vader",
"birthYear": "41.9BBY",
"favoriteColor": "black",
"power": 3000,
"saberColor": "red",
"status": "single"
}
}
}
REST API always return a fixed structure.
Most of the time you don't need all the information.
Think mobile, and bad network
Under-fetching
GET - /person/42
GET - /person/42/planets
GET - /person/42/movies
We need multiple calls for one view.
Introducing BFF
![](https://media0.giphy.com/media/l0MYHEI0xktKCVjri/giphy.gif)
Backend for Frontend
Back for iOs
Back for Web
Movie
Planet
Person
Monolith
Movie
Planet
Person
Router
BFF method
{
"data": {
"person": {
"name": "Darth Vader",
"birthYear": "41.9BBY",
"planet": {
"name": "Tatooine"
},
"movies": [
{ "title": "A New Hope" },
{ "title": "The Empire Strikes Back" },
{ "title": "Return of the Jedi" },
{ "title": "Revenge of the Sith" }
]
}
}
}
GET - /person/presentation/42
![](https://media0.giphy.com/media/SzQ5ao5QZ13mo/giphy.gif)
So isn't that good?
![](https://media3.giphy.com/media/QxHzTRigoD9HG/giphy.gif)
![](https://media0.giphy.com/media/SzQ5ao5QZ13mo/giphy.gif)
So isn't that good?
![](https://media3.giphy.com/media/QxHzTRigoD9HG/giphy.gif)
Too many endpoints
New features = new endpoints
Hard to maintain
![](https://media2.giphy.com/media/G8E0raYJHQDVC/giphy.gif)
One update = multiple changes
Complex language
![](https://media2.giphy.com/media/9gISqB3tncMmY/giphy.gif)
Put VS Post VS Patch ?
Query / Params / Body / Headers ?
Poor documentation
![](https://media3.giphy.com/media/L3pfVwbsJbrk4/giphy.gif)
Poor validation
![](https://media0.giphy.com/media/Qw4X3FGPX1ui9rhWruM/giphy.gif)
Input & Output
Versionning
![](https://media2.giphy.com/media/12jTdr7ptC6r9m/giphy.gif)
Now introducing GraphQL
GraphQL is a query language for your API
GraphQL provides
a description of the data in your API
GraphQL is WYWIWYG
* What you want is what you get
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1275776/images/7284687/darthvader.png)
query {
}
query {
person(id: 42)
}
query {
person(id: 42) {
name
birthYear
}
}
query {
person(id: 42) {
name
birthYear
planet {
name
}
movies {
title
}
}
}
query {
person(id: 42) {
name
birthYear
planet {
name
}
movies {
title
}
}
}
{
"person": {
"name": "Darth Vader",
"birthYear": "41.9BBY",
"planet": {
"name": "Tatooine"
},
"movies": [
{ "title": "A New Hope" },
{ "title": "The Empire Strikes Back" },
{ "title": "Return of the Jedi" },
{ "title": "Revenge of the Sith" }
]
}
}
![](https://media3.giphy.com/media/LoflljVKpDuWA/giphy.gif)
query {
person(id: 42) {
name
birthYear
saberColor
planet {
name
}
movies {
title
}
}
}
{
"person": {
"name": "Darth Vader",
"birthYear": "41.9BBY",
"saberColor": "red",
"planet": {
"name": "Tatooine"
},
"movies": [
{ "title": "A New Hope" },
{ "title": "The Empire Strikes Back" },
{ "title": "Return of the Jedi" },
{ "title": "Revenge of the Sith" }
]
}
}
![](https://media2.giphy.com/media/6fScAIQR0P0xW/giphy.gif)
{
mutation {
createPlanet(name: "Padoïne") {
id
name
date
}
}
}
![](https://media2.giphy.com/media/3o7ZeTmU77UlPyeR2w/giphy.gif)
{
mutation {
createPlanet(name: "Padoïne") {
id
name
date
habitant {
name
}
}
}
}
![](https://media2.giphy.com/media/3o7ZeTmU77UlPyeR2w/giphy.gif)
How does this magic work??
Step 1 - schema.graphql / types definitions
type Person {
id: ID!
name: String!
birthYear: Int!
picture: String
}
![](https://media1.giphy.com/media/d2sdxvH0u2oU0/giphy.gif)
type Person {
id: ID!
name: String!
birthYear: Int!
picture: String!
planet: Planet!
movies: [Movies]
}
type Planet {
id: ID!
name: String!
positionX: Int!
positionY: Int!
}
scalar DateTime
type Movie {
id: ID!
title: String!
date: DateTime
actors: [Person]
}
type Person {
id: ID!
name: String!
birthYear: Int!
picture: String!
planet: Planet!
movies: [Movies]
saberColor: SaberColor
}
enum SaberColor {
Red
Blue
Green
Purple
Pink
}
type Planet {
id: ID!
name: String!
positionX: Int!
positionY: Int!
}
type AirWings implements Vehicule {
maxSpeed: Int
droid: Droid
pilote: Person
}
interface Vehicle {
maxSpeed: Int
}
scalar DateTime
type Movie {
id: ID!
title: String!
date: DateTime
actors: Person[]
}
type FalconMilenium implements Vehicule {
maxSpeed: Int
pilote1: Person
pilote2: Person
}
type Query {
person(id: ID!): Person
planets: [Planets]
movies(size: Int, orderBy: String): [Movies]
}
type Query {
person(id: ID!): Person
planets: [Planets]
movies(size: Int, orderBy: String): [Movies]
}
input PersonInput {
name: String
}
type Mutation {
createPlanet(name: Planet!): Planet!
createPerson(person: PersonInput!): Person!
}
type Person {
id: ID!
birthYear: Int!
name: String!
planet: Planet!
movies: [Movies]
}
type Planet {
id: ID!
name: String!
positionX: Int!
positionY: Int!
}
type Movie {
id: ID!
title: String!
date: DateTime
actors: [Person]
}
type Query {
person(id: ID!): Person
planets: [Planets]
movies(size: Int, orderBy: String): [Movies]
}
typeDefs
2. Resolvers
type Person {
id: ID!
birthYear: Int!
name: String!
planet: Planet!
movies: [Movies]
}
type Planet {
id: ID!
name: String!
positionX: Int!
positionY: Int!
}
type Movie {
id: ID!
title: String!
date: DateTime
actors: [Person]
}
type Query {
person(id: ID!): Person
planets: [Planets]
movies(size: Int, orderBy: String): [Movies]
}
resolvers
const resolver = (parent, args, ctx, infos) =>
const resolvers = {
Query: {
person: (parent, {id}, ctx, infos) => ctx.db.person.findById(id),
planets: (parent, args, ctx, infos) => ctx.db.planets.findMany(),
movies: (parent, {size, orderBy}, ctx, infos) => ctx.db.movies.findMany({size,orderBy}),
},
Person: {
planet: ({planet_id}, {id}, ctx, infos) => ctx.db.planet.findById(planet_id),
movies: ({movie_ids}, {id}, ctx, infos) => ctx.db.movie.findByIds(movie_ids),
},
/*
Planet: { ..},
Movie: {.. },
*/
};
resolvers
const resolver = (parent, args, ctx, infos) =>
const resolvers = {
Query: {
person: (parent, { id }, ctx, infos) => ctx.db.person.findById(id),
planets: (parent, args, ctx, infos) => ctx.db.planets.findMany(),
movies: (parent, { size, orderBy}, ctx, infos) => {
return ctx.db.movies.findMany({ size, orderBy })
},
},
Person: {
id: (parent) => parent.id, // Default Resolver
name: (parent) => parent.name, // Default Resolver
birthYear: (parent) => root.birthYear, // Default Resolver
planet: ({ planet_id }, { id }, ctx, infos) => ctx.db.planet.findById(planet_id),
movies: ({ movie_ids }, { id }, ctx, infos) => ctx.db.movie.findByIds(movie_ids),
},
/*
Planet: { ..},
Movie: {.. },
*/
};
resolvers
const resolvers = {
Query: {
person: (parent, { id }, ctx, infos) => ctx.db.person.findById(id),
planets: (parent, args, ctx, infos) => ctx.db.planets.findMany(),
movies: (parent, { size, orderBy}, ctx, infos) => {
return ctx.db.movies.findMany({ size, orderBy })
},
},
Person: {
id: (parent) => parent.id,
name: (parent) => parent.name,
birthYear: (parent) => parent.birthYear,
planet: ({ planet_id }, { id }, ctx, infos) => ctx.db.planet.findById(planet_id),
movies: ({ movie_ids }, { id }, ctx, infos) => ctx.db.movie.findByIds(movie_ids),
},
/*
Planet: { ..},
Movie: {.. },
*/
};
resolvers
query {
person(id: 42) {
name
birthYear
planet {
name
}
movies {
title
}
}
}
const resolvers = {
Query: {
person: (parent, { id }, ctx, infos) => ctx.db.person.findById(id),
planets: (parent, args, ctx, infos) => ctx.db.planets.findMany(),
movies: (parent, { size, orderBy}, ctx, infos) => ctx.db.movies.findMany({ size, orderBy }),
},
Person: {
id: (parent) => parent.id,
name: (parent) => parent.name,
birthYear: (parent) => parent.birthYear,
planet: ({ planet_id }, { id }, ctx, infos) => ctx.db.planet.findById(planet_id),
movies: ({ movie_ids }, { id }, ctx, infos) => ctx.db.movie.findByIds(movie_ids),
},
/*
Planet: { ..},
Movie: {.. },
*/
};
Query
query {
person(id: 42) {
name
birthYear
planet {
name
}
movies {
title
}
}
}
const resolvers = {
Query: {
person: (parent, { id }, ctx, infos) => ctx.db.person.findById(id),
planets: (root, args, ctx, infos) => ctx.db.planets.findMany(),
movies: (root, { size, orderBy}, ctx, infos) => ctx.db.movies.findMany({ size, orderBy }),
},
Person: {
id: (parent) => parent.id,
name: (parent) => parent.name,
birthYear: (parent) => root.birthYear,
planet: ({ planet_id }, { id }, ctx, infos) => ctx.db.planet.findById(planet_id),
movies: ({ movie_ids }, { id }, ctx, infos) => ctx.db.movie.findByIds(movie_ids),
},
/*
Planet: { ..},
Movie: {.. },
*/
};
Query
query {
person(id: 42) {
name
birthYear
planet {
name
}
movies {
title
}
}
}
{
"person": {
}
}
Result
const resolvers = {
Query: {
person: (parent, { id }, ctx, infos) => ctx.db.person.findById(id),
planets: (parent, args, ctx, infos) => ctx.db.planets.findMany(),
movies: (parent, { size, orderBy}, ctx, infos) => ctx.db.movies.findMany({ size, orderBy }),
},
Person: {
id: (parent) => parent.id,
name: (parent) => parent.name,
birthYear: (parent) => root.birthYear,
planet: ({ planet_id }, { id }, ctx, infos) => ctx.db.planet.findById(planet_id),
movies: ({ movie_ids }, { id }, ctx, infos) => ctx.db.movie.findByIds(movie_ids),
},
/*
Planet: { ..},
Movie: {.. },
*/
};
Query
query {
person(id: 42) {
name
birthYear
planet {
name
}
movies {
title
}
}
}
{
"person": {
"name": "Darth Vader",
"birthYear": "41.9BBY",
"planet": { // planet_id = 34
},
"movies": [ // movie_ids = [2,4,5,6]
]
}
}
}
Result
const resolvers = {
Query: {
person: (parent, { id }, ctx, infos) => ctx.db.person.findById(id),
planets: (parent, args, ctx, infos) => ctx.db.planets.findMany(),
movies: (parent, { size, orderBy}, ctx, infos) => ctx.db.movies.findMany({ size, orderBy }),
},
Person: {
id: (parent) => parent.id,
name: (parent) => parent.name,
birthYear: (parent) => parent.birthYear,
planet: ({ planet_id }, { id }, ctx, infos) => ctx.db.planet.findById(planet_id),
movies: ({ movie_ids }, { id }, ctx, infos) => ctx.db.movie.findByIds(movie_ids),
},
Planet: {
name: (root) => root.name
},
Movie: {
title: (root) => root.title
},
};
Query
query {
person(id: 42) {
name
birthYear
planet {
name
}
movies {
title
}
}
}
{
"person": {
"name": "Darth Vader",
"birthYear": "41.9BBY",
"planet": {
"name": "Tatooine"
},
"movies": [
{ "title": "A New Hope" },
{ "title": "The Empire Strikes Back" },
{ "title": "Return of the Jedi" },
{ "title": "Revenge of the Sith" }
]
}
}
}
Result
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1275776/images/7300587/pasted-from-clipboard.png)
Resolvers = Single Source of Truth
3- Server creation
const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
const typeDefs = gql`
type Query {
hello: String
}
`;
const resolvers = {
Query: {
hello: () => 'Hello world!',
},
};
const server = new ApolloServer({ typeDefs, resolvers });
const app = express();
server.applyMiddleware({ app });
app.listen({ port: 4000 }, () =>
console.log('Now browse to http://localhost:4000' + server.graphqlPath)
);
4- Bonus
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1275776/images/7305947/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1275776/images/7305950/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1275776/images/7305951/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1275776/images/7305969/pasted-from-clipboard.png)
Directives
directive @deprecated(
reason: String = "No longer supported"
) on FIELD_DEFINITION | ENUM_VALUE
type ExampleType {
firstName: String
first_name: String @deprecated(reason: "Use `newField`.")
}
Directives
directive @rest(url: String) on FIELD_DEFINITION
type Query {
people: [Person] @rest(url: "/api/v1/people")
}
Directives
directive @auth(
requires: Role = ADMIN,
) on OBJECT | FIELD_DEFINITION
enum Role {
ADMIN
REVIEWER
USER
UNKNOWN
}
type User @auth(requires: USER) {
name: String
banned: Boolean @auth(requires: ADMIN)
canPost: Boolean @auth(requires: REVIEWER)
}
Directives
directive @cache(
time: Duration,
) on FIELD_DEFINITION
enum Duration {
TenSeconds
OneMinute
OneHour
OneDay
Forever
}
type Person {
name: String!
planet: String! @cache(duration: Forever)
movies: [Movie] @cache(duration: OneDay)
}
type Query {
person(id: Person): Person
movies: [Movie] @cache(duration: OneDay)
}
Subscriptions
type User {
person: String
}
type Chat {
id: ID!
message: [Message]
}
type Query {
messages(chatId: ID!): [Message]
}
type Mutation {
createMessage(chatId: ID!, message: String!): Message
}
type Subscription {
newMessage(chatId: ID!): Message
}
Dataloader
Han Solo
Chewbaca
Episode 4
Episode 5
Episode 6
Episode 4
Episode 5
Episode 6
Episode 3
Dataloader
Han Solo
Chewbaca
Episode 4
Episode 5
Episode 6
Episode 4
Episode 5
Episode 6
Episode 3
api/falconMilenium
api/person/12
api/person/13
api/movie/4
api/movie/5
api/movie/6
api/movie/3
api/movie/4
api/movie/5
api/movie/6
Dataloader
Han Solo
Chewbaca
Episode 4
Episode 5
Episode 6
Episode 4
Episode 5
Episode 6
Episode 3
api/falconMilenium
api/person/12
api/person/13
api/movie/4
api/movie/5
api/movie/6
api/movie/3
api/movie/4
api/movie/5
api/movie/6
Dataloader
Han Solo
Chewbaca
Episode 4
Episode 5
Episode 6
Episode 4
Episode 5
Episode 6
Episode 3
api/falconMilenium
api/persons?id=12,13
api/movie?3,4,5,6
![](https://media1.giphy.com/media/YJDpfht5PU5i0/giphy.gif)
A lot of possibilities ..
type PersonMutation {
name(name: String): String
hairColor(color: Color): Color
danse(danse: Danse): Danse
fight(name: String!): Fight
}
type Mutation {
person(name: String!): PersonMutation
}
mutation {
person(name: "Anakin Skywalker") {
name(name: "Darth Vader")
hairColor(color: Black)
fight(name: "Obiwan Kenobi") {
person {
id
lifePoint
}
}
}
}
Scalability with Apollo Federation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1275776/images/7305988/pasted-from-clipboard.png)
Typings from server to client
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1275776/images/7305991/pasted-from-clipboard.png)
git clone git@github.com:LucM/apollo-wars.git
cd apollo-wars
npm i
npm run dev
Give it a try!
![](https://media2.giphy.com/media/jaJZTmLL4PFQY/giphy.gif)
![](https://media3.giphy.com/media/ZZcnaOh0VzqZq/giphy.gif)
Thank you!
Copy of Copy of Introduction to GraphQL
By Luc MOMAL
Copy of Copy of Introduction to GraphQL
- 181