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

All you need is Apollo Client

All you need is Apollo Client

In this presentation, I want to show a few nice features of Apollo Client on Vue application, aside from fetching data from GraphQL endpoint

D2a706fe1f598d26a6a2ae246ff551ce?s=128

Natalia Tepluhina

March 03, 2020
Tweet

More Decks by Natalia Tepluhina

Other Decks in Programming

Transcript

  1. All you need is love Apollo Client

  2. No, this is not a Vue+GraphQL talk

  3. None
  4. Core Team Member My name is Natalia Tepluhina Google Developer

    Expert Senior Frontend Engineer @N_Tepluhina
  5. So, how do we fetch data?

  6. Dispatch an action Trigger API call Success? Commit ‘success’ mutation

    State changed Commit ‘error’ mutation Yes No
  7. Are you ok? I’m fine

  8. Query Success/error State changed

  9. DEMO

  10. Ok but what about local state?

  11. None
  12. Local state* = Apollo Cache *everything is Apollo Cache

  13. ‘Normal’ query…

  14. ..vs local query

  15. Setting initial state

  16. Changing data

  17. Read the cache Update data Write back to the cache

  18. DEMO

  19. Migrating from REST API?

  20. My legacy is quite fun

  21. All the magic happens in the resolver

  22. Mocking a backend response

  23. When frontend is ready before backend

  24. All the magic happens in the resolver!

  25. Thanks! You can find demo repository at bit.ly/apollo-is-love