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”: “wilma@flintstones.com”, “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