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

Moving from Redux to GraphQL

Shruti Kapoor
November 07, 2018

Moving from Redux to GraphQL

Have you been thinking of how your current Redux architecture will fit into a GraphQL app? Ever wondered what will happen to the reducers and data store and what is its GraphQL equivalent? How would you store data on the client side? This talk walks through the process of these decisions.

Shruti Kapoor

November 07, 2018
Tweet

More Decks by Shruti Kapoor

Other Decks in Programming

Transcript

  1. - S H R U T I K A P

    O O R & P E R U M A L P A L A N I Moving from Redux to GraphQL
  2. Outline State of GraphQL @ PayPal Redux 101 and GraphQL

    101 Transitioning from Redux -> GraphQL
  3. Outline State of GraphQL @ PayPal Redux 101 and GraphQL

    101 Transitioning from Redux -> GraphQL
  4. Objects that send data from application to store Actions An

    object that stores state tree of application Store Functions that define how state changes in response to action Reducers Redux features https://redux.js.org/basics/
  5. Store How Redux works State updated = UI re-rendered XYZ

    store.dispatch(“DONE FETCHING”)
  6. • Redux cares about storing data and immutability. • It

    doesn’t care so much about the structure of data you need. • If we don’t normalize data, we could end up with a huge and unmaintainable store. • Developers spend a lot of time learning tribal API knowledge
  7. Outline State of GraphQL @ PayPal Redux 101 and GraphQL

    101 Transitioning from Redux -> GraphQL
  8. Outline State of GraphQL @ PayPal Redux 101 and GraphQL

    101 Transitioning from Redux -> GraphQL
  9. As clients integrated, we looked closely at how they were

    using data to render and manage state
  10. A request to receive or modify information from the server

    Query, Mutations Describes the functionality available to the clients Schema A function that returns value for a field Resolvers GraphQL features https://www.apollographql.com/docs/
  11. • When using GraphQL, you may not need a state

    management library. • Usually react state or context is enough for passing data. • For example, apollo-link-state can be used for state management. Lessons Learnt
  12. Outline State of GraphQL @ PayPal Redux 101 and GraphQL

    101 Transitioning from Redux -> GraphQL
  13. Outline State of GraphQL @ PayPal Redux 101 and GraphQL

    101 Transitioning from Redux -> GraphQL
  14. At PayPal, 33 teams are building and consuming GraphQL APIs

    As of a month ago, probably more now…