introduction to graphql to enhance your apis
TRANSCRIPT
![Page 1: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/1.jpg)
Introduction to GraphQL to enhance your APIs
![Page 2: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/2.jpg)
Hi!
DionysisTechnical Team Leader @jexia
RobertBackend Developer @jexia
@robertignat
irobert91
linkedin.com/in/robertignat
@d3nnn1z
d3nnn1z
linkedin.com/in/d3nnn1z
![Page 3: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/3.jpg)
Agenda
• Introduction to GraphQL• Let’s build a server• Advantages & Disadvantages• Compared to REST• Q&A
![Page 4: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/4.jpg)
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.
![Page 5: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/5.jpg)
No, you don’t have to use a graph db.
![Page 6: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/6.jpg)
No, you don’t have to use a specific server language.
![Page 7: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/7.jpg)
How GraphQL works?
iOS App
Android App
Web App
Desktop App
GraphQL Server
Data
Data
GraphQLQueries
JSONPayload
1
2
![Page 8: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/9.jpg)
MonkeparkYou can use GraphQL with your existing backend!
Let’s build a server!
github.com/irobert91/monkepark-server-graphql
![Page 10: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/10.jpg)
Advantages
![Page 11: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/12.jpg)
Disadvantages
![Page 13: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/13.jpg)
Disadvantages
• Steep learning curve• Overhead to manipulate the data• No select *• Args can become enormous• Boilerplate
![Page 14: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/14.jpg)
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
![Page 15: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/15.jpg)
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}
![Page 16: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/16.jpg)
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
![Page 17: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/17.jpg)
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
![Page 18: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/18.jpg)
Custom Endpoints
Custom Endpoint 1 Custom Endpoint 2 Custom Endpoint 3
View 1 View 2 View 3
![Page 19: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/22.jpg)
Custom Endpoints
![Page 23: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/23.jpg)
GraphQL
GraphQL
View 1 View 2 View 3
![Page 24: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/24.jpg)
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
![Page 25: Introduction to GraphQL to enhance your APIs](https://reader030.vdocument.in/reader030/viewer/2022020213/589ab3f11a28abff4f8b58e1/html5/thumbnails/25.jpg)
Thank you! Questions?
DionysisTechnical Team Leader @jexia
RobertBackend Developer @jexia
@robertignat
irobert91
linkedin.com/in/robertignat
@d3nnn1z
d3nnn1z
linkedin.com/in/d3nnn1z