Introduction to GraphQL to enhance your APIs
Hi!
DionysisTechnical Team Leader @jexia
RobertBackend Developer @jexia
@robertignat
irobert91
linkedin.com/in/robertignat
@d3nnn1z
d3nnn1z
linkedin.com/in/d3nnn1z
Agenda
• Introduction to GraphQL• Let’s build a server• Advantages & Disadvantages• Compared to REST• Q&A
What is GraphQL?
GraphQL is a data query language and runtime designed and used at Facebook to request and deliver data to mobile and web apps since 2012.
How GraphQL works?
iOS App
Android App
Web App
Desktop App
GraphQL Server
Data
Data
GraphQLQueries
JSONPayload
1
2
GraphQL Query Example
{ user(id: 123) { name email friends { id name } }}
{ “user”: { “name”: “Wilma”, “email”: “[email protected]”, “friends”: [ { “id”: 124, “name”: “Barney” }, { “id”: 132, “name”: “Fred” } ] }}
GraphQL query JSON Payload
MonkeparkYou can use GraphQL with your existing backend!
Let’s build a server!
github.com/irobert91/monkepark-server-graphql
Advantages
• What you see is what you get • Client specific data• Application layer protocol• Strong typed• Self documenting• Existing backend APIs• RFC - http://facebook.github.io/graphql• Extra powers with Relay and React• Introspection• Active community
Disadvantages
• Steep learning curve• Overhead to manipulate the data• No select *• Args can become enormous• Boilerplate
From REST to GraphQL
MandrillThe mandrill has an olive green or dark grey pelage with yellow and black bands and a white belly. Its hairless face has an elongated muzzle with distinctive characteristics, such as a red stripe down the middle and protruding blue ridges on the sides. It also has red nostrils and lips, a yellow beard and white tufts.
Africa
REST
GET /monkey/1
{ id: 1, name: "Mandrill", description: "The mandrill has...", imageUrl: “mandrill.jpg”, regions: [1], ...}
GET /regions/1
{ id: 1, name: "Africa", area: 30370000}
GraphQL
{ name: "Mandrill", description: "The mandrill has...", imageUrl: “mandrill.jpg”, regions: [ { name: “Africa” } ]}
MandrillusThe mandrill has an olive green or dark grey pelage with yellow and black bands and a white belly. Its hairless face has an elongated muzzle with distinctive characteristics, such as a red stripe down the middle and protruding blue ridges on the sides. It also has red nostrils and lips, a yellow beard and white tufts.
Africa
GraphQL
GraphQL JSON
{ monkey(id: 1) { name description imageUrl regions { name } }}
REQUEST
{ name: "Mandrill", description: "The mandrill has...", imageUrl: “mandrill.jpg”, regions: [ { name: “Africa” } ]}
RESPONSE
Custom Endpoints
Custom Endpoint 1
Custom Endpoint 2
Custom Endpoint 3
Custom Endpoint 4
Custom Endpoint 5
Custom Endpoint 6
View 1 View 2 View 3 View 4 View 5 View 6
Custom Endpoints
Custom Endpoint 1 Custom Endpoint 2 Custom Endpoint 3
View 1.1 View 2.1 View 3.1
Custom Endpoint 1.1 Custom Endpoint 2.1 Custom Endpoint 3.1
Custom Endpoints
Custom Endpoint 1 Custom Endpoint 2 Custom Endpoint 3
View 1.2 View 2.2 View 3.2
Custom Endpoint 1.1 Custom Endpoint 2.1 Custom Endpoint 3.1Custom Endpoint 1.2 Custom Endpoint 2.2 Custom Endpoint 3.2
Links
Github repo What?
github.com/facebook/graphqlThe GraphQL specification, it’s not tied to a specific
implementation
github.com/graphql/graphql-js Node.js reference implementation by Facebook
github.com/graphql/graphiqlWeb based IDE for GraphQL, cool features like
autocomplete
github.com/facebook/dataloader A data fetcher utility
github.com/chentsulin/awesome-graphql Awesome GraphQL
github.com/irobert91/monkepark-server Original monkepark server
github.com/irobert91/monkepark-server-graphql GraphQL monkepark