graphql & relay

Viacheslav SlinkoCIAN Group

@vslinko

GraphQL

Relayand

Problems

2

Problems• UI Driven Data Fetching

• Network Op!miza!ons

• Simple API Versioning

• Incremental Rendering

3

REST is resource oriented

4

REST is not op!mal

5

En!!es should be synchronized

6

Intro

7

{ me { nickname } }

GraphQL Request

8

{“data”: { “me”: { “nickname”: “vslinko” } }}

GraphQL Response

9

Data Layer

Applica!on Layer

GraphQL

10

Your current business logic

Library on your favorite language

Any database you want

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

Good Parts

12

Modern Applica!ons

13

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

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

Compose Requirements

15

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

Send Composed Query

16

Balance

User

Object

Photo 1 Photo 2 Photo 3

Execute QueryTime

17

User

Object

Object

Object

PhotoPhotoPhoto

PhotoPhotoPhoto

PhotoPhotoPhoto

Render and Cache

18

Data Re-usage

19

There are only two hard things

in Computer Science: cache invalida!on and naming things.

20

21

Muta!ons• Data Changes

• Side-effects

• Declara!ve API

• Op!mis!c Updates

22

Incremental Rendering

23

24

GraphQL

Version 1

Applica!on

Version 1

Versioning

Ini!al release

GraphQL

Version 1

Applica!on

Version 1Version 2

Versioning

New features — new fields 24

GraphQL

Version 1

Applica!on

Version 1Version 2Version 3

Versioning

Change fields without problems 24

GraphQL

Version 1

Applica!on

Version 997Version 998Version 999

Applica!on

Version 1

Versioning

Do not delete fields — deprecate them 24

25

Good Parts: Recap• Declara!ve & UI Oriented

• Very Effec!ve

• Simple Maintenance

• Extra Pre#y Features

26

Bad Parts

27

Verbose code

28

Documenta!on is not complete

29

Current Problems• No Subscrip!ons

• No Local State Management

• Complex Setup Process

30

In Conclusion

31

In Conclusion• Tries to Solve All Problems

• Simple but Not Easy

• Growing Community

32

Thanks! Ques!ons?

h"p://bit.ly/gr-notes

Viacheslav SlinkoCIAN Group

@vslinko