Upload
dionysis-pantazopoulos
View
135
Download
3
Embed Size (px)
Citation preview
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.
No, you don’t have to use a graph db.
No, you don’t have to use a specific server language.
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
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
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
View 1 View 2 View 3
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
Custom Endpoints
GraphQL
GraphQL
View 1 View 2 View 3
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
Thank you! Questions?
DionysisTechnical Team Leader @jexia
RobertBackend Developer @jexia
@robertignat
irobert91
linkedin.com/in/robertignat
@d3nnn1z
d3nnn1z
linkedin.com/in/d3nnn1z