Presentation about GraphQL at Frontcon Riga, April 5th 2019.

1. GraphQL Will Do To REST
What JSON Did To XML
Frontcon Riga
05/04/2019

2. What is this about?
@gethackteam

3. @gethackteam

4. @gethackteam

5. @gethackteam

6. Who Am I?
@gethackteam

7. Roy Derks
@gethackteam
#javascriptEverywhere
#reactjs #ReactNative #GraphQL
@gethackteam

8. Who is this for?
@gethackteam

9. Who is this for?
BACKEND
@gethackteam

10. What is wrong with REST?
@gethackteam

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

12. Let’s build an UI that fetches
data from a REST API
@gethackteam

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

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

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

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

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

18. What is wrong with REST?
Multiple Endpoints
1
@gethackteam

19. What is wrong with REST?
Multiple Endpoints
1
2
@gethackteam

20. What is wrong with REST?
Multiple Endpoints
1
2
3
@gethackteam

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

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

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

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

30. One problem: we’ve used a
nested layout design
@gethackteam

31. What is wrong with REST?
Under/Over-fetching
@gethackteam

32. What is wrong with REST?
Under/Over-fetching
@gethackteam

33. Why not specify parameters
you want to receive?
@gethackteam

34. @gethackteam
What is wrong with REST?
Under/Over-fetching

35. @gethackteam
What is wrong with REST?
Under/Over-fetching

36. But what if we do want to show
offers but only the latest one?
@gethackteam

37. @gethackteam
What is wrong with REST?
Under/Over-fetching

38. @gethackteam
What is wrong with REST?
Under/Over-fetching

39. @gethackteam
What is wrong with REST?
Under/Over-fetching

40. How can we display all the
offers again?
@gethackteam

41. What is wrong with REST?
Under/Over-fetching
@gethackteam

42. SHOW
What is wrong with REST?
Under/Over-fetching
@gethackteam

43. SHOW
What is wrong with REST?
Under/Over-fetching
@gethackteam

44. SHOW
What is wrong with REST?
Under/Over-fetching
2
1
@gethackteam

45. But how does this affect the first
version of the application?
@gethackteam

46. SHOW MORE
What is wrong with REST?
Versioning
V1 V2 @gethackteam

47. SHOW MORE
What is wrong with REST?
Versioning
V1 V2
Different endpoints
@gethackteam

48. SHOW MORE
What is wrong with REST?
Versioning
V1 V2
Different endpoints
@gethackteam
Different parameters

49. SHOW MORE
What is wrong with REST?
Versioning
V1 V2
Different endpoints
@gethackteam
Different parameters
Different datastructures

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

51. @gethackteam

52. Don’t forget the HAL
guidelines btw
@gethackteam

53. @gethackteam
What is wrong with REST?
HAL
@gethackteam

54. @gethackteam
What is wrong with REST?
HAL
@gethackteam

55. @gethackteam
What is wrong with REST?
HAL
@gethackteam

56. @gethackteam
What is wrong with REST?
HAL
@gethackteam

57. @gethackteam
What is wrong with REST?
HAL
@gethackteam

58. How does GraphQL
solve these problems?
@gethackteam

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

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

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

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

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

64. How does GraphQL Solve This
Multiple Endpoints
@gethackteam

65. How does GraphQL Solve This
Multiple Endpoints
@gethackteam

66. How does GraphQL Solve This
Multiple Endpoints
GET
Query
@gethackteam

67. How does GraphQL Solve This
Multiple Endpoints
Mutation
POST PUT
PATCH DELETE
GET
Query
@gethackteam

68. How does GraphQL Solve This
Multiple Endpoints
Mutation
POST PUT
PATCH DELETE
GET
Query
@gethackteam

69. How does GraphQL Solve This
Single endpoint

70. How does GraphQL Solve This
Single endpoint

71. How does GraphQL Solve This
Single endpoint
Describe the data structure

72. How does GraphQL Solve This
Single endpoint
Describe the data structure
Set the possible queries

73. How does GraphQL Solve This
Single endpoint

74. Specify which data
to return
How does GraphQL Solve This
Single endpoint

75. Specify which data
to return
How does GraphQL Solve This
Single endpoint
Set dynamic parameters

76. How does GraphQL Solve This
Single endpoint

77. How does GraphQL Solve This
Single endpoint
Predictable return result

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

79. BACKEND
Implementation
@gethackteam

80. BACKEND
Implementation
@gethackteam

81. Frontend
@gethackteam

82. Frontend
@gethackteam

83. Frontend
GET
Query
@gethackteam

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

85. Try me :)
@gethackteam
BACKEND FRONTEND

86. What else has GraphQL
to offer?
@gethackteam

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

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

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

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

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

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

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

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

95. To summarise..
@gethackteam

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

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

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

99. @gethackteam

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

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