Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Oh Hello Apollo client, Goodbye Redux!

Oh Hello Apollo client, Goodbye Redux!

Ba0adbbfa699d09f6ee7b4402e4dcf9f?s=128

Ankita Kulkarni

March 31, 2021
Tweet

Transcript

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

    Digital
  2. @kulkarniankita9 Hi, I’m Ankita!

  3. @kulkarniankita9 Let’s take a step back first! 🤚

  4. @kulkarniankita9 What is a good state manager? 🤔

  5. @kulkarniankita9 Data is normalized 💯

  6. @kulkarniankita9 Data transforms Consistently 𝌡

  7. @kulkarniankita9 Visualize global state 🧙

  8. @kulkarniankita9 Debugging is not hard 🔎

  9. @kulkarniankita9 You can write tests ✅

  10. @kulkarniankita9 We all know a library that was good at

    this! ☺
  11. @kulkarniankita9 Redux fixes everything ✨

  12. @kulkarniankita9 What is Redux? Source: https://bumbu.me/simple-redux/

  13. @kulkarniankita9 Redux world request CART SUCCESS CART ERROR CART REQUEST

    ActionType.CART_REQUEST ActionType.CART_ERROR ActionType.CART_SUCCESS
  14. @kulkarniankita9 Async request in redux

  15. @kulkarniankita9 Then why switch….? 😅

  16. @kulkarniankita9 Apollo GQL happened 👏

  17. @kulkarniankita9 After Apollo Client hooks 🚀,

  18. @kulkarniankita9 No need for actions 🙅 CART SUCCESS CART FAILURE

    CART REQUEST ActionType.LOGIN_REQUEST ActionType.LOGIN_FAILURE ActionType.LOGIN_SUCCESS
  19. @kulkarniankita9 It still doesn’t replace Redux, not convinced 🙄

  20. @kulkarniankita9 I still had questions, how do we? • Normalize

    data • Handle async actions • Trigger state updates in the component • And remember selectors? • Transform data
  21. @kulkarniankita9

  22. @kulkarniankita9 Apollo Client 3 is here…✨✨✨

  23. @kulkarniankita9 Difference between Redux and Apollo client

  24. @kulkarniankita9 Apollo client does the heavy lifting for you 💪

  25. @kulkarniankita9 Let’s revisit state management principles

  26. @kulkarniankita9 My data is normalized (no dupes please 🙏)

  27. @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
  28. @kulkarniankita9 Root Query

  29. @kulkarniankita9 You need to understand the internal workings of the

    Apollo client!!! ←
  30. @kulkarniankita9 Data transformations

  31. @kulkarniankita9 Let’s look at some examples

  32. @kulkarniankita9 Cart Query

  33. @kulkarniankita9 Out of stock / Low stock msg (react)

  34. @kulkarniankita9 How can we achieve the same in Apollo client?

    🚀
  35. @kulkarniankita9 What are Local only fields 🦋

  36. @kulkarniankita9 @client

  37. @kulkarniankita9 Local only fields 🦋

  38. @kulkarniankita9 To access in a component 🦋

  39. @kulkarniankita9 What about fields that don’t need to be defined

    in in a GQL type?
  40. @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 🌸
  41. @kulkarniankita9 Reactive variables 🌸

  42. @kulkarniankita9 Reactive variables 🌸

  43. @kulkarniankita9 Isn’t that cool? 🔥

  44. @kulkarniankita9 Debugging with Apollo client

  45. @kulkarniankita9 Visualize your cache 🧙

  46. @kulkarniankita9 Visualize your cache 🧙 Link!

  47. @kulkarniankita9 Testing! ✅

  48. @kulkarniankita9 Testing! ✅

  49. @kulkarniankita9 Keep an open mind 😇

  50. @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
  51. @kulkarniankita9 It’s a mindset shift 💯

  52. @kulkarniankita9 This is pretty much the end.. Questions? Comments? Feedback…make

    it positive—😉 Catch me after on Twitch!!
  53. @kulkarniankita9 You did it 👏