The document discusses GraphQL as an alternative to REST APIs. It begins by describing some common issues with REST APIs, such as over-fetching and under-fetching data. It then introduces GraphQL as a query language that allows clients to get precisely the data they need in a single request. Key benefits of GraphQL include no breaking changes, no over-fetching or under-fetching, and being transport agnostic. The document also covers GraphQL concepts like schemas, queries, mutations, and errors. It provides examples of how problems like rate limiting and error handling are approached differently in GraphQL compared to REST. In the end, it acknowledges that GraphQL has a learning curve but can help solve real problems for

1. GraphQL
to the
RES(T)cue

2. HELLO!
I am Ella Sharakanski

3. HELLO!
and you are
Mark Zuckerberg.
In 2003.
Image by Elaine Chan and Priscilla Chan from Wikimedia

4. REST API
An architectural style
for web APIs

5. REST API
GET /posts
[{
"text": "Kinder!",
"creation_date": "06/04/2016",
"author": …,
…
},
…
]

7. Add
Comments

8. GET /posts
[{
"text": "Kinder!",
"creation_date": "06/04/2016",
"author": …,
"comments": [ , ],
…
},
…
]
1 2

10. Remove
Comments

11. GET /posts
[{
"text": "Kinder!",
"creation_date": "06/04/2016",
"author": …,
"comments": [ , ],
…
},
…
]
1 2

12. GET /posts
[{
"text": "Kinder!",
"creation_date": "06/04/2016",
"author": …,
"comments": [ , ],
…
},
…
]
1 2

13. GET /posts
[{
"text": "Kinder!",
"creation_date": "06/04/2016",
"author": …,
"comments": [ , ],
…
},
…
]
1 2
• Breaking Change
• Requires Backend

14. GET /posts
[{
"text": "Kinder!",
"creation_date": "06/04/2016",
"author": …,
…
},
…
]
• Breaking Change
• Requires Backend

16. Add
Comments

17. But only for the web.
The app should be
clean.
Add
Comments

18. GET /posts
GET /posts/1/comments
GET /posts/2/comments
GET /posts/3/comments
GET /posts/4/comments
GET /posts/5/comments
...
Solution 1
Under-Fetching
• Slow
• Inconventient

19. GET /posts
[{
"text": "Kinder!",
"comments": [ , ],
…
Don’t use returned comments
Solution 2
Over-Fetching
• Wastes Time
• Wastes Bandwidth
1 2

20. GET /posts?view=detailed
GET /posts?view=standard
...
GET /posts?view=simple
GET /posts?view=simpler
GET /posts?view=full
Solution 3
• Confusing
• Not Scalable

21. GraphQL
Query Language for APIs

22. Schema

23. Schema
type Query {
posts: [Post!]
post(id: ID!): Post
…
}
type Post {
id: ID!
text: String
comments: [Comment!]
…
}
type Comment {
id: ID!
text: String
}

24. Schema
type Query {
posts: [Post!]
post(id: ID!): Post
…
}
type Post {
id: ID!
text: String
comments: [Comment!]
…
}
type Comment {
id: ID!
text: String
}

25. Schema
type Query {
posts: [Post!]
post(id: ID!): Post
…
}
type Post {
id: ID!
text: String
comments: [Comment!]
…
}
type Comment {
id: ID!
text: String
}

26. Schema
type Query {
posts: [Post!]
post(id: ID!): Post
…
}
type Post {
id: ID!
text: String
comments: [Comment!]
…
}
type Comment {
id: ID!
text: String
}
Benefits:
• Contract between
client & server
• Allows introspection

27. Schema
type Query {
posts: [Post!]
post(id: ID!): Post
…
}
type Post {
id: ID!
text: String
comments: [Comment!]
…
}
type Comment {
id: ID!
text: String
}
POST /graphql
Query

28. Schema
type Query {
posts: [Post!]
post(id: ID!): Post
…
}
type Post {
id: ID!
text: String
comments: [Comment!]
…
}
type Comment {
id: ID!
text: String
}
POST /graphql
query {
posts {
text
comments {
text
}
}
}
Query

29. Result
{
"data": {
"posts": [
{
"text": "Kinder!",
"comments": [
{
"text": "Cute!"
},
{
"text": "So small!"
}
]
}
]
}
}
POST /graphql
query {
posts {
text
comments {
text
}
}
}
Query

30. Result
{
"data": {
"posts": [
{
"text": "Kinder!",
"comments": [
{
"text": "Cute!"
},
{
"text": "So small!"
}
]
}
]
}
}
POST /graphql
query {
posts {
text
comments {
text
}
}
}
Query
Remove
Comments

31. Result
{
"data": {
"posts": [
{
"text": "Kinder!"
}
]
}
}
POST /graphql
query {
posts {
text
}
}
Query
Remove
Comments

32. GraphQL Solves
Real Problems
• No Breaking Changes
• No Over-Fetching
• No Under-Fetching

33. PayPal
Airbnb
Shopify
Pinterest
Everyone uses GraphQL
Twitter
GitHub
Starbucks
Facebook

34. Salto
Salto
Salto
Salto
Everyone uses GraphQL
Salto
Salto
Salto
Salto

35. Schema Query Result
GraphQL Concepts

36. Schema Query Result
Mutation Error
GraphQL Concepts

37. Mutation

38. type Mutation {
createPost(text: String!): Post
}
type Query {
posts: [Post!]
post(id: ID!): Post
}
type Post {
id: ID!
text: String
comments: [Comment!]
}
type Comment {
id: ID!
text: String
}
Schema

39. POST /graphql
Mutation

40. POST /graphql
mutation {
createPost(text: "DOD!") {
id
}
}
Mutation

41. POST /graphql
mutation {
createPost(text: "DOD!") {
id
}
}
Result
{
"data": {
"createPost": {
"id": "1233"
}
}
}
Mutation

42. Errors
{
"errors": [
{
"message": "Cannot find post",
"path": [
"post"
],
"extensions": {
"code": "NOT_FOUND"
}
}
],
"data": null
}
query {
post(id: "1234") {
text
}
}

43. Errors
{
"errors": [
{
"message": "Cannot find post",
"path": [
"post"
],
"extensions": {
"code": "NOT_FOUND"
}
}
],
"data": null
}
query {
post(id: "1234") {
text
}
}

44. Errors
{
"errors": [
{
"message": "Cannot find post",
"path": [
"post"
],
"extensions": {
"code": "NOT_FOUND"
}
}
],
"data": null
}
query {
post(id: "1234") {
text
}
}

45. GraphQL
is Very
Flexible!
Yoga Dogs, Dan Borris
› Errors per-field
› Query what you need
› Transport agnostic

48. • Learning Curve
Image by Gabe Raggio from Pixabay

49. • Learning Curve
• Maturity
Image by Gabe Raggio from Pixabay

50. • Learning Curve
• Maturity
• Flexibility
Image by Gabe Raggio from Pixabay

52. REST Requests

53. REST Requests

54. REST Requests
Resource

55. REST Requests
Rate
Limit

56. GraphQL Requests

57. GraphQL Requests

58. GraphQL Requests

59. GraphQL Requests

61. Could not load 

62. Could not load 

63. Could not load 
Alert
Failures

64. REST Solution:
• Log responses
• Alert on 5xx
Could not load 

65. With GraphQL:
• Errors get 200 OK!
Could not load 

67. Icon made by Freepik from www.flaticon.com

68. Icon made by Freepik from www.flaticon.com
Rate
Limiting

69. REST Solution:
• Limit POST /comments
requests to 10 per
minute per user.
• Use an API gateway.
Icon made by Freepik from www.flaticon.com

70. With GraphQL:
• Parsing the body is
slow!
Icon made by Freepik from www.flaticon.com

71. GraphQL
Solves Problems
GraphQL
Takes Time

72. The Default
Image by Pixource from Pixabay
• Clients
• Data

73. Clients
• Different Clients
• Bandwidth-conscious
Data
• Many different resources
• Many fields
• Well connected
Image by Clker-Free-Vector-Images from Pixabay

74. Choose
the Tool
That Suits
You Best
Image by Bianca van Dijk from Pixabay

75. THANKS!
Any questions?
You can find me at:
www.linkedin.com/in/EllaShar
Resources: SlidesCarnival, StartupStockPhotos, Unsplash, Pixabay, Rawpixel, PNGEgg.

76. • Modeling GraphQL Errors: 1, 2, 3
• Rate Limiting: 1, 2
• The Case Against GraphQL (Robert Zhu)
• Why GraphQL (Chris Arcand)
• AppSync (AWS), Kong, Tyk
Further Reading