Oh Hello Apollo client, Goodbye Redux!

@kulkarniankita9 Oh hello Apollo Client, Farewell Redux Ankita Kulkarni, Loblaw
Digital

@kulkarniankita9 Hi, I’m Ankita!

@kulkarniankita9 Let’s take a step back ﬁrst! 🤚

@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 ﬁxes 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 Diﬀerence 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 ﬁelds 🦋

@kulkarniankita9 @client

@kulkarniankita9 Local only ﬁelds 🦋

@kulkarniankita9 To access in a component 🦋

@kulkarniankita9 What about ﬁelds that don’t need to be deﬁned
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 Isn’t that cool? 🔥

@kulkarniankita9 Debugging with Apollo client

@kulkarniankita9 Visualize your cache 🧙

@kulkarniankita9 Visualize your cache 🧙 Link!

@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 👏

Oh Hello Apollo client, Goodbye Redux!

Oh Hello Apollo client, Goodbye Redux!

More Decks by Ankita Kulkarni

Other Decks in Programming

Featured

Transcript