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
200
Beyond the React Native Benchmark
kulkarniankita09
0
56
Accessibility 360 - Web -> Mobile
kulkarniankita09
0
58
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
600
Being Agile - Scrum and Extreme Programming
kulkarniankita09
0
77
Other Decks in Programming
See All in Programming
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
520
Deep Dive into Kotlin Flow
jmatsu
1
350
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
個人軟體時代
ethanhuang13
0
330
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
550
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
390
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
Rancher と Terraform
fufuhu
2
550
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
690
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
250
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Fireside Chat
paigeccino
39
3.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
BBQ
matthewcrist
89
9.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Documentation Writing (for coders)
carmenintech
74
5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
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 👏