@kulkarniankita9
No need for actions 🙅
CART
SUCCESS
CART
FAILURE
CART
REQUEST
ActionType.LOGIN_REQUEST
ActionType.LOGIN_FAILURE
ActionType.LOGIN_SUCCESS
Slide 19
Slide 19 text
@kulkarniankita9
It still doesn’t
replace Redux,
not convinced 🙄
Slide 20
Slide 20 text
@kulkarniankita9
I still had questions, how do we?
• Normalize data
• Handle async actions
• Trigger state updates in the component
• And remember selectors?
• Transform data
Slide 21
Slide 21 text
@kulkarniankita9
Slide 22
Slide 22 text
@kulkarniankita9
Apollo Client 3 is
here…✨✨✨
Slide 23
Slide 23 text
@kulkarniankita9
Difference between Redux
and Apollo client
Slide 24
Slide 24 text
@kulkarniankita9
Apollo client does the
heavy lifting for you 💪
Slide 25
Slide 25 text
@kulkarniankita9
Let’s revisit state
management
principles
Slide 26
Slide 26 text
@kulkarniankita9
My data is normalized (no dupes please 🙏)
Slide 27
Slide 27 text
@kulkarniankita9
Apollo client 🚀
• automatically caches your data by generating a unique ID
• Normalizes new data in query responses and after mutation
• Stores data using references so it can look up data easily
Slide 28
Slide 28 text
@kulkarniankita9
Root Query
Slide 29
Slide 29 text
@kulkarniankita9
You need to understand
the internal workings of
the Apollo client!!! ←
Slide 30
Slide 30 text
@kulkarniankita9
Data
transformations
Slide 31
Slide 31 text
@kulkarniankita9
Let’s look at some
examples
Slide 32
Slide 32 text
@kulkarniankita9
Cart Query
Slide 33
Slide 33 text
@kulkarniankita9
Out of stock / Low stock msg (react)
Slide 34
Slide 34 text
@kulkarniankita9
How can we achieve the
same in Apollo client? 🚀
Slide 35
Slide 35 text
@kulkarniankita9
What are Local only fields 🦋
Slide 36
Slide 36 text
@kulkarniankita9
@client
Slide 37
Slide 37 text
@kulkarniankita9
Local only fields 🦋
Slide 38
Slide 38 text
@kulkarniankita9
To access in a component 🦋
Slide 39
Slide 39 text
@kulkarniankita9
What about fields that
don’t need to be defined in
in a GQL type?
Slide 40
Slide 40 text
@kulkarniankita9
• Store local state outside the Apollo client cache
• You can store whatever you want in whatever shape you want
• Modifying them triggers a update
Reactive variables 🌸
Slide 41
Slide 41 text
@kulkarniankita9
Reactive variables 🌸
Slide 42
Slide 42 text
@kulkarniankita9
Reactive variables 🌸
Slide 43
Slide 43 text
@kulkarniankita9
Isn’t that cool? 🔥
Slide 44
Slide 44 text
@kulkarniankita9
Debugging with
Apollo client
Slide 45
Slide 45 text
@kulkarniankita9
Visualize your cache 🧙
Slide 46
Slide 46 text
@kulkarniankita9
Visualize your cache 🧙
Link!
Slide 47
Slide 47 text
@kulkarniankita9
Testing! ✅
Slide 48
Slide 48 text
@kulkarniankita9
Testing! ✅
Slide 49
Slide 49 text
@kulkarniankita9
Keep an open
mind 😇
Slide 50
Slide 50 text
@kulkarniankita9
Take away 🚀
• You take control or give away your control a little
• In Redux, we were doing a LOT!
• Using Redux and Apollo client with GQL redundant data
• You need to understand how Apollo client works
Slide 51
Slide 51 text
@kulkarniankita9
It’s a mindset
shift 💯
Slide 52
Slide 52 text
@kulkarniankita9
This is pretty much the end..
Questions?
Comments?
Feedback…make it positive—😉
Catch me after on Twitch!!