Tweet
Tweet

Slide 1

Slide 1 text

All you need is love Apollo Client

Slide 2

Slide 2 text

No, this is not a Vue+GraphQL talk

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Core Team Member My name is Natalia Tepluhina Google Developer Expert Senior Frontend Engineer @N_Tepluhina

Slide 5

Slide 5 text

So, how do we fetch data?

Slide 6

Slide 6 text

Dispatch an action Trigger API call Success? Commit ‘success’ mutation State changed Commit ‘error’ mutation Yes No

Slide 7

Slide 7 text

Are you ok? I’m fine

Slide 8

Slide 8 text

Query Success/error State changed

Slide 9

Slide 9 text

DEMO

Slide 10

Slide 10 text

Ok but what about local state?

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Local state* = Apollo Cache *everything is Apollo Cache

Slide 13

Slide 13 text

‘Normal’ query…

Slide 14

Slide 14 text

..vs local query

Slide 15

Slide 15 text

Setting initial state

Slide 16

Slide 16 text

Changing data

Slide 17

Slide 17 text

Read the cache Update data Write back to the cache

Slide 18

Slide 18 text

DEMO

Slide 19

Slide 19 text

Migrating from REST API?

Slide 20

Slide 20 text

My legacy is quite fun

Slide 21

Slide 21 text

All the magic happens in the resolver

Slide 22

Slide 22 text

Mocking a backend response

Slide 23

Slide 23 text

When frontend is ready before backend

Slide 24

Slide 24 text

All the magic happens in the resolver!

Slide 25

Slide 25 text

Thanks! You can find demo repository at bit.ly/apollo-is-love