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
55
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
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
生成AI、実際どう? - ニーリーの場合
nealle
0
140
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.3k
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
100
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
310
AWS Serverless Application Model入門_20250708
smatsuzaki
0
110
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
120
Honoアップデート 2025年夏
yusukebe
1
790
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
1
200
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
1.1k
パスタの技術
yusukebe
1
390
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
700
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Building an army of robots
kneath
306
45k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Language of Interfaces
destraynor
160
25k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Fireside Chat
paigeccino
39
3.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Agile that works and the tools we love
rasmusluckow
329
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
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 👏