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
450
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
240
Lessons learned: Architecting react apps
kulkarniankita09
1
210
Beyond the React Native Benchmark
kulkarniankita09
0
64
Accessibility 360 - Web -> Mobile
kulkarniankita09
0
71
Make your React Native apps accessible 🙌
kulkarniankita09
0
180
Let's fight - Redux side-effects showdown
kulkarniankita09
0
160
The Art of Humanizing Pull Requests
kulkarniankita09
0
610
Being Agile - Scrum and Extreme Programming
kulkarniankita09
0
83
Other Decks in Programming
See All in Programming
XP, Testing and ninja testing ZOZ5
m_seki
3
760
AI Agent 時代的開發者生存指南
eddie
4
2k
Go言語はstack overflowの夢を見るか?
logica0419
0
500
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
600
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
1
330
Le côté obscur des IA génératives
pascallemerrer
0
150
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
350
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
EMこそClaude Codeでコード調査しよう
shibayu36
0
250
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Done Done
chrislema
185
16k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Thoughts on Productivity
jonyablonski
70
4.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Building an army of robots
kneath
306
46k
KATA
mclloyd
PRO
32
15k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
A better future with KSS
kneath
239
18k
Speed Design
sergeychernyshev
32
1.2k
Mobile First: as difficult as doing things right
swwweet
225
10k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
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 👏