MoscowJS 30

1. Viacheslav Slinko
CIAN Group
@vslinko
GraphQL
Relay
and

2. Problems
2

3. Problems
• UI Driven Data Fetching
• Network Op!miza!ons
• Simple API Versioning
• Incremental Rendering
3

4. REST is resource oriented
4

5. REST is not op!mal
5

6. En!!es should be
synchronized
6

7. Intro
7

8. {
me {
nickname
}
}
GraphQL Request
8

9. {“data”: {
“me”: {
“nickname”: “vslinko”
}
}}
GraphQL Response
9

10. Data Layer
Applica!on Layer
GraphQL
10
Your current
business logic
Library on your
favorite language
Any database
you want

11. Data Layer
Applica!on Layer
GraphQL
Relay
React
11
Your current
business logic
Library on your
favorite language
Any database
you want
Client JavaScript
Framework
View Layer

12. Good Parts
12

13. Modern Applica!ons
13

14. fragments: {
object: () => Relay.QL`
fragment on Object {
title
photos(width: 300) {
url
}
}
`,
}
fragments: {
object: () => Relay.QL`
fragment on Object {
title
photos(width: 300) {
url
}
}
`,
}
fragments: {
object: () => Relay.QL`
fragment on Object {
title
photos(width: 300) {
url
}
}
`,
}
fragments: {
object: () => Relay.QL`
fragment on Object {
title
photos(width: 300) {
url
}
}
`,
}
Parse Requirements
14

15. fragments: {
user: () => Relay.QL`
fragment on User {
favourites(first: 10) {
${ObjectView.getFragment(‘object’)}
}
}
`,
}
Compose Requirements
15

16. fragments: {
root: () => Relay.QL`
fragment on RootQuery {
me {
balance
${ObjectView.getFragment(‘user’)}
}
}
`,
}
Send Composed Query
16

17. Balance
User
Object
Photo 1 Photo 2 Photo 3
Execute Query
Time
17

18. User
Object
Object
Object
PhotoPhotoPhoto
PhotoPhotoPhoto
PhotoPhotoPhoto
Render and Cache
18

19. Data Re-usage
19

20. There are only
two hard things
in Computer Science:
cache invalida!on
and naming things.
20

21. 21

22. Muta!ons
• Data Changes
• Side-effects
• Declara!ve API
• Op!mis!c Updates
22

23. Incremental Rendering
23

24. 24
GraphQL
Version 1
Applica!on
Version 1
Versioning
Ini!al release

25. GraphQL
Version 1
Applica!on
Version 1
Version 2
Versioning
New features — new fields 24

26. GraphQL
Version 1
Applica!on
Version 1
Version 2
Version 3
Versioning
Change fields without problems 24

27. GraphQL
Version 1
Applica!on
Version 997
Version 998
Version 999
Applica!on
Version 1
Versioning
Do not delete fields — deprecate them 24

28. 25

29. Good Parts: Recap
• Declara!ve & UI Oriented
• Very Effec!ve
• Simple Maintenance
• Extra Pre#y Features
26

30. Bad Parts
27

31. Verbose code
28

32. Documenta!on
is not complete
29

33. Current Problems
• No Subscrip!ons
• No Local State Management
• Complex Setup Process
30

34. In Conclusion
31

35. In Conclusion
• Tries to Solve All Problems
• Simple but Not Easy
• Growing Community
32

36. Thanks!
Ques!ons?
h"p://bit.ly/gr-notes
Viacheslav Slinko
CIAN Group
@vslinko