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
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
830
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
320
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
240
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
220
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
1.6k
JetBrainsのAI機能の紹介 #jjug
yusuke
0
160
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.6k
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
DataformでPythonする / dataform-de-python
snhryt
0
130
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
130
QA x AIエコシステム段階構築作戦
osu
0
220
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Code Reviewing Like a Champion
maltzj
524
40k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Embracing the Ebb and Flow
colly
86
4.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Gamification - CAS2011
davidbonilla
81
5.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Documentation Writing (for coders)
carmenintech
73
4.9k
Building an army of robots
kneath
306
45k
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 👏