For many, many years mobile developers had to rely on the REST APIs to feed their application with data. However, since some years there is a new kid on the block called GraphQL. It takes away the hassle of having to deal with multiple endpoints and separates the data flow from your application even more. Remember the N+1 problem, over-fetching or working with different API versions? After this talk you definitely want your backend developers to start using GraphQL!

1. The Next Generation of
APIs: GraphQL over REST
mDevCamp Prague
31/05/2019

2. What is this about?
@gethackteam

4. Who Am I?
@gethackteam

5. Roy Derks
@gethackteam

6. Who is this for?
@gethackteam

7. Who is this for?
BACKEND
@gethackteam

8. What is wrong with REST?
@gethackteam

9. REST has multiple
endpoints that return fixed
data structures
@gethackteam

10. A REST API is a contract
@gethackteam

11. @gethackteam
REST
USERS PRODUCTS CART
Database

12. @gethackteam
REST
USERS PRODUCTS CART
Database
PRODUCTS

13. PRODUCTSPRODUCTS
@gethackteam
REST
USERS
CART
PRODUCTS
Database
USERS
BILLING
PRODUCTS
CATEGORIES
CART

14. PRODUCTSPRODUCTS
@gethackteam
REST
USERS
CART
PRODUCTS
Database
USERS
BILLING
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
CART

15. PRODUCTS
RATINGS
@gethackteam
REST
PRODUCTSUSERS PRODUCTS
CART
PRODUCTS
Database
USERS
ORDERS
CART
USERS
BILLING
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES

16. PRODUCTS
RATINGS
PRODUCTS
RATINGS
@gethackteam
REST
PRODUCTSUSERS PRODUCTS
CART
PRODUCTS
Database
USERS
ORDERS
CART
USERS
BILLING
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES

17. @gethackteam
REST
Database
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
REST API
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES

18. @gethackteam
REST
Database
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
1
REST API
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES

19. @gethackteam
REST
Database
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
1
2
REST API
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES

20. @gethackteam
REST
Database
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
1
3
2
REST API
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES

21. @gethackteam
REST

22. @gethackteam
REST

23. @gethackteam
REST
🤔

24. Multiple endpoints can
affect performance
@gethackteam

25. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Multiple Endpoints
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
REST API
@gethackteam

26. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Multiple Endpoints
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
1
REST API
@gethackteam

27. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Multiple Endpoints
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
1
REST API
@gethackteam

28. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Multiple Endpoints
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
1
REST API
@gethackteam

29. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Multiple Endpoints
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
1
2
REST API
@gethackteam

30. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Multiple Endpoints
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
1
2
REST API
@gethackteam

31. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Multiple Endpoints
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
1
3
2
REST API
@gethackteam

32. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Multiple Endpoints
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
1
3
2
REST API
@gethackteam

33. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Multiple Endpoints
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
1
3
2
REST API
?
@gethackteam

34. What is wrong with REST?
Multiple Endpoints
@gethackteam

35. What is wrong with REST?
Multiple Endpoints
@gethackteam
Wait for all requests to finish?

36. What is wrong with REST?
Multiple Endpoints
@gethackteam
Wait for all requests to finish?
Show result from each
request asap?

37. What is wrong with REST?
Multiple Endpoints
@gethackteam
Wait for all requests to finish?
Show result from each
request asap?

43. Why not create one endpoint
with all information?
@gethackteam

44. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Overfetching
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
REST API
@gethackteam

45. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Overfetching
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
REST API
@gethackteam

46. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Overfetching
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
REST API
@gethackteam

47. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Overfetching
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
REST API
@gethackteam

48. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Overfetching
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
REST API
@gethackteam

49. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Overfetching
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
REST API
@gethackteam

50. TITLE
PRICE
What is wrong with REST?
Overfetching
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
REST API
@gethackteam

51. TITLE
PRICE
What is wrong with REST?
Overfetching
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
REST API
@gethackteam

52. TITLE
PRICE
What is wrong with REST?
Overfetching
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
REST API
@gethackteam

53. TITLE
PRICE
What is wrong with REST?
Overfetching
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
REST API
@gethackteam

54. TITLE
PRICE
What is wrong with REST?
Overfetching
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
REST API
@gethackteam

55. TITLE
PRICE
What is wrong with REST?
Overfetching
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
REST API
@gethackteam
?

56. What is wrong with REST?
Overfetching
@gethackteam

57. What is wrong with REST?
Overfetching
@gethackteam
How many KBs of “useless” data?

58. What is wrong with REST?
Overfetching
@gethackteam
How many KBs of “useless” data?
Ask your BE to change the API?

59. What is wrong with REST?
Overfetching
@gethackteam
How many KBs of “useless” data?
Ask your BE to change the API?
Caching?

60. @gethackteam

61. What if you want to show the
categories again?
@gethackteam

62. TITLE
PRICE
What is wrong with REST?
Underfetching
PRODUCTS
PRODUCTS
RATINGS
REST API
@gethackteam

63. TITLE
PRICE
What is wrong with REST?
Underfetching
PRODUCTS
PRODUCTS
RATINGS
REST API
@gethackteam

64. TITLE
PRICE
What is wrong with REST?
Underfetching
PRODUCTS
PRODUCTS
RATINGS
REST API
@gethackteam

65. TITLE
PRICE
What is wrong with REST?
Underfetching
PRODUCTS
PRODUCTS
RATINGS
REST API
@gethackteam

66. TITLE
PRICE
What is wrong with REST?
Underfetching
PRODUCTS
PRODUCTS
RATINGS
REST API
@gethackteam

67. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Underfetching
PRODUCTS
PRODUCTS
RATINGS
REST API
@gethackteam

68. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Underfetching
PRODUCTS
PRODUCTS
RATINGS
REST API
@gethackteam
PRODUCTS
CATEGORIES

69. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Underfetching
PRODUCTS
PRODUCTS
RATINGS
REST API
@gethackteam
PRODUCTS
CATEGORIES
1

70. TITLE
CATEGORIES
PRICE
What is wrong with REST?
Underfetching
PRODUCTS
PRODUCTS
RATINGS
REST API
@gethackteam
PRODUCTS
CATEGORIES
1
2

71. @gethackteam

72. Wait a minute..
Did we document all this?
@gethackteam

74. How does GraphQL
solve these problems?
@gethackteam

75. How does GraphQL
solve these problems?
Multiple Endpoints
@gethackteam

76. How does GraphQL
solve these problems?
Multiple Endpoints
Over-fetching
@gethackteam

77. How does GraphQL
solve these problems?
Multiple Endpoints
Under-fetching (N+1)
Over-fetching
@gethackteam

78. How does GraphQL
solve these problems?
Multiple Endpoints
Under-fetching (N+1)
Over-fetching Versioning /
Documentation
@gethackteam

79. GraphQL has a single
endpoint that returns flexible
data structures
@gethackteam

80. @gethackteam
How does GraphQL Solve This?
Single Endpoint

81. @gethackteam
How does GraphQL Solve This?
Single Endpoint

82. GET
Query
@gethackteam
How does GraphQL Solve This?
Single Endpoint

83. Mutation
POST PUT
PATCH DELETE
GET
Query
@gethackteam
How does GraphQL Solve This?
Single Endpoint

84. Its type system makes
this possible
@gethackteam

85. Remember the database
example?
@gethackteam

86. @gethackteam
Type System
PRODUCTSUSERS PRODUCTS
CART
PRODUCTSUSERS
ORDERS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
CART
USERS
BILLING
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES
Database

87. Forget about rows, columns,
tables..
@gethackteam

88. Think in types only!
@gethackteam

89. @gethackteam
Type System
GraphQL
PRODUCTSUSERS PRODUCTS
CART
PRODUCTSUSERS
ORDERS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
CART
USERS
BILLING
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES

90. Resolvers connect your
schema to the data
@gethackteam

91. @gethackteam
Type System
GraphQL
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES

92. @gethackteam
Type System
GraphQL
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES

93. @gethackteam
Type System
GraphQL
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES

94. @gethackteam
Type System
GraphQL
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES

95. @gethackteam
Type System
GraphQL
PRODUCTSPRODUCTS
PRODUCTS
THUMBNAILS
PRODUCTS
RATINGS
PRODUCTS
CATEGORIES
PRODUCTS
CATEGORIES

96. So you’re able to query
the schema
@gethackteam

97. @gethackteam@gethackteam
Type System

98. @gethackteam@gethackteam
Type System

99. @gethackteam
Query just the fields
you want!!
@gethackteam
Type System

100. @gethackteam
Query just the fields
you want!!
@gethackteam
Type System

101. @gethackteam
Query just the fields
you want!!
@gethackteam
Type System

102. And receive just the data
you’ve asked for
@gethackteam

103. @gethackteam
Type System

104. @gethackteam
Type System

105. @gethackteam
Type System

106. @gethackteam
Type System

107. @gethackteam
Type System

108. @gethackteam
Type System

109. @gethackteam
Type System

110. @gethackteam
Type System

111. Sounds great! How can I
implement this?
@gethackteam

112. BACKEND
Implementation
@gethackteam

113. BACKEND
Implementation
@gethackteam

114. Frontend
@gethackteam

115. Frontend
@gethackteam

116. Frontend
GET
Query
@gethackteam

117. Frontend
Mutation
POST PUT
PATCH DELETE
GET
Query
@gethackteam

118. What else has GraphQL
to offer?
@gethackteam

119. What else has GraphQL
to offer?
Modern Tooling
@gethackteam

120. What else has GraphQL
to offer?
Developer Community
Modern Tooling
@gethackteam

121. What else has GraphQL
to offer?
Developer Community
Modern Tooling
Platform agnostic
@gethackteam

122. What else has GraphQL
to offer?
Developer Community
Modern Tooling
Industry Adoption
Platform agnostic
@gethackteam

123. What else has GraphQL to offer?
Developer Community
@gethackteam

124. What else has GraphQL to offer?
Developer Community
@gethackteam

125. What else has GraphQL to offer?
Developer Community
@gethackteam

126. What else has GraphQL to offer?
Developer Community
@gethackteam

127. What else has GraphQL to offer?
Industry Adoption
@gethackteam

128. To summarise..
@gethackteam

129. REST has multiple endpoints that
return fixed data structures
@gethackteam

130. GraphQL has a single endpoint that
returns flexible data structures
REST has multiple endpoints that
return fixed data structures
@gethackteam

131. GraphQL can be built on top of
your existing data and code
@gethackteam

132. Database(s)
Third-party API
@gethackteam
What else has GraphQL to offer?
Integration Existing Code

133. Database(s)
Third-party API
@gethackteam
What else has GraphQL to offer?
Integration Existing Code

134. Database(s)
Third-party API
@gethackteam
What else has GraphQL to offer?
Integration Existing Code

135. Will REST be send to the
graveyard by GraphQL?
@gethackteam

136. https://graphql.org
https://howtographql.com/
Want to learn more?
#javascriptEverywhere@gethackteam