Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Oh Hello Apollo client, Goodbye Redux!
Search
Ankita Kulkarni
March 31, 2021
Programming
1
440
Oh Hello Apollo client, Goodbye Redux!
Ankita Kulkarni
March 31, 2021
Tweet
Share
More Decks by Ankita Kulkarni
See All by Ankita Kulkarni
5 things you must know to take your Next app to the next level
kulkarniankita09
0
230
Lessons learned: Architecting react apps
kulkarniankita09
1
190
Beyond the React Native Benchmark
kulkarniankita09
0
51
Accessibility 360 - Web -> Mobile
kulkarniankita09
0
54
Make your React Native apps accessible 🙌
kulkarniankita09
0
170
Let's fight - Redux side-effects showdown
kulkarniankita09
0
150
The Art of Humanizing Pull Requests
kulkarniankita09
0
590
Being Agile - Scrum and Extreme Programming
kulkarniankita09
0
73
Other Decks in Programming
See All in Programming
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
240
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
110
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
ふつうの技術スタックでアート作品を作ってみる
akira888
1
490
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
350
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
610
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
280
Hack Claude Code with Claude Code
choplin
3
960
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
350
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
16k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Designing for humans not robots
tammielis
253
25k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Language of Interfaces
destraynor
158
25k
GraphQLとの向き合い方2022年版
quramy
49
14k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Code Review Best Practice
trishagee
69
18k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Unsuck your backbone
ammeep
671
58k
Transcript
@kulkarniankita9 Oh hello Apollo Client, Farewell Redux Ankita Kulkarni, Loblaw
Digital
@kulkarniankita9 Hi, I’m Ankita!
@kulkarniankita9 Let’s take a step back first! 🤚
@kulkarniankita9 What is a good state manager? 🤔
@kulkarniankita9 Data is normalized 💯
@kulkarniankita9 Data transforms Consistently 𝌡
@kulkarniankita9 Visualize global state 🧙
@kulkarniankita9 Debugging is not hard 🔎
@kulkarniankita9 You can write tests ✅
@kulkarniankita9 We all know a library that was good at
this! ☺
@kulkarniankita9 Redux fixes everything ✨
@kulkarniankita9 What is Redux? Source: https://bumbu.me/simple-redux/
@kulkarniankita9 Redux world request CART SUCCESS CART ERROR CART REQUEST
ActionType.CART_REQUEST ActionType.CART_ERROR ActionType.CART_SUCCESS
@kulkarniankita9 Async request in redux
@kulkarniankita9 Then why switch….? 😅
@kulkarniankita9 Apollo GQL happened 👏
@kulkarniankita9 After Apollo Client hooks 🚀,
@kulkarniankita9 No need for actions 🙅 CART SUCCESS CART FAILURE
CART REQUEST ActionType.LOGIN_REQUEST ActionType.LOGIN_FAILURE ActionType.LOGIN_SUCCESS
@kulkarniankita9 It still doesn’t replace Redux, not convinced 🙄
@kulkarniankita9 I still had questions, how do we? • Normalize
data • Handle async actions • Trigger state updates in the component • And remember selectors? • Transform data
@kulkarniankita9
@kulkarniankita9 Apollo Client 3 is here…✨✨✨
@kulkarniankita9 Difference between Redux and Apollo client
@kulkarniankita9 Apollo client does the heavy lifting for you 💪
@kulkarniankita9 Let’s revisit state management principles
@kulkarniankita9 My data is normalized (no dupes please 🙏)
@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
@kulkarniankita9 Root Query
@kulkarniankita9 You need to understand the internal workings of the
Apollo client!!! ←
@kulkarniankita9 Data transformations
@kulkarniankita9 Let’s look at some examples
@kulkarniankita9 Cart Query
@kulkarniankita9 Out of stock / Low stock msg (react)
@kulkarniankita9 How can we achieve the same in Apollo client?
🚀
@kulkarniankita9 What are Local only fields 🦋
@kulkarniankita9 @client
@kulkarniankita9 Local only fields 🦋
@kulkarniankita9 To access in a component 🦋
@kulkarniankita9 What about fields that don’t need to be defined
in in a GQL type?
@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 🌸
@kulkarniankita9 Reactive variables 🌸
@kulkarniankita9 Reactive variables 🌸
@kulkarniankita9 Isn’t that cool? 🔥
@kulkarniankita9 Debugging with Apollo client
@kulkarniankita9 Visualize your cache 🧙
@kulkarniankita9 Visualize your cache 🧙 Link!
@kulkarniankita9 Testing! ✅
@kulkarniankita9 Testing! ✅
@kulkarniankita9 Keep an open mind 😇
@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
@kulkarniankita9 It’s a mindset shift 💯
@kulkarniankita9 This is pretty much the end.. Questions? Comments? Feedback…make
it positive—😉 Catch me after on Twitch!!
@kulkarniankita9 You did it 👏