1 of 26

Helsinki

❤️

GraphQL

Viktor Lukashov

stepzen.com

2 of 26

Tabs or spaces

Start presenting to display the poll results on this slide.

3 of 26

Vim or Emacs

Start presenting to display the poll results on this slide.

4 of 26

Summary

Should you use GraphQL?

Brief intro to GraphQL, its key differences with REST, pros and cons of both, and ultimately some examples and hints showing when and when NOT to use GraphQL.

5 of 26

GraphQL

a brief intro

  • all data is a graph

6 of 26

GraphQL

a brief intro

  • all data is a graph
  • looks like JSON

7 of 26

GraphQL

a brief intro

  • all data is a graph
  • looks like JSON
  • fully typed

8 of 26

GraphQL

a brief intro

  • all data is a graph
  • looks like JSON
  • fully typed
  • single POST endpoint

9 of 26

GraphQL

a brief intro

  • all data is a graph
  • looks like JSON
  • fully typed
  • single POST endpoint
  • Facebook, ca. 2015

10 of 26

GraphQL foundation

11 of 26

GraphQL foundation

12 of 26

Query

Response

{

allVehicles(first: 2) {

vehicles {

name

model

}

}

}

{

"data": {

"allVehicles": {

"vehicles": [

{

"name": "Sand Crawler",

"model": "Digger Crawler"

},

{

"name": "T-16 skyhopper",

"model": "T-16 skyhopper"

}

]

}

}

}

13 of 26

Code-completion

14 of 26

Schema

The cost of DX

type Root {

allVehicles(

after: String, first: Int,

before: String, last: Int

): VehiclesConnection

}

"""

A single transport craft that does not have hyperdrive capability

"""

type Vehicle {

"""

The name of this vehicle. The common name, such

as "Sand Crawler" or "Speeder bike".

"""

name: String

"""

The model or official name of this vehicle.

Such as "All-Terrain Attack Transport".

"""

model: String

}

... 1168 lines in total ...

15 of 26

REST

GraphQL

1 network call per query

1 network call per entity

single HTTP endpoint

multiple HTTP endpoints

client-defined response content

server-defined response content

no built-in access control

access control on HTTP level

strictly typed / schema is required

schema is optional

supports real-time data

more complex server-side code

simpler server-side code

vs

16 of 26

Use REST if…

Client views map 1-to-1 to REST endpoints

e.g. CRUDs

17 of 26

Use REST if…

The same team works on the backend and the frontend

18 of 26

Use REST if…

The data comes from many sources AND there is no team / budget to federate it into a single GraphQL schema.

19 of 26

Use GraphQL if…

Complex and / or varying data requirements across the client

20 of 26

Use GraphQL if…

Frontend and backend teams are separate

21 of 26

Use GraphQL if…

You can externalise the cost of creating the GraphQL server

(or you have in-house experience)

22 of 26

Use GraphQL if…

There is a need for real-time data as well.

23 of 26

Use GraphQL if…

You can benefit from strong typing

(e.g. client in TypeScript)

24 of 26

Demo time

25 of 26

REST or GraphQL

Start presenting to display the poll results on this slide.

26 of 26

Thank you!

Viktor Lukashov

stepzen.com

DALL·E 2

openai.com