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.

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. @shrutikapoor08 @perumalcsbe Shruti Kapoor Perumal Palani
3. Redux?
4. GraphQL?
5. Inspiration, Challenges and Lessons Redux to GraphQL
6. “Spread love, not hype” - Dan Abramov “
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. 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/
10. Store How Redux works
11. Store How Redux works State updated = UI re-rendered XYZ
12. Store How Redux works store.dispatch(action) State updated = UI re-rendered XYZ
13. Store How Redux works State updated = UI re-rendered XYZ calls reducer
14. Store How Redux works State updated = UI re-rendered XYZ calls API Middleware
15. Store How Redux works State updated = UI re-rendered XYZ Normalized data data
16. Store How Redux works State updated = UI re-rendered XYZ store.dispatch(“DONE FETCHING”)
17. Store How Redux works
18. 700ms Minimum cost of every round trip in Checkout https://medium.com/paypal-engineering/graphql-a-success-story-for-paypal-checkout-3482f724fb53
19. API Developer UI Developer
20. API Developer UI Developer
21. API Developer UI Developer
22. • 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
23. We think in terms of data fields. Not resources Not endpoints Not joins
24. That’s where GraphQL comes in.
25. Outline State of GraphQL @ PayPal Redux 101 and GraphQL 101 Transitioning from Redux -> GraphQL
26. Outline State of GraphQL @ PayPal Redux 101 and GraphQL 101 Transitioning from Redux -> GraphQL
27. As clients integrated, we looked closely at how they were using data to render and manage state
28. What do you need to do? API Developer UI Developer
29. API Developer UI Developer Get users
30. API Developer UI Developer Filter users for user_id
31. API Developer UI Developer Get name of user with user_id
32. API Developer UI Developer Get account balance for user_id
33. API Developer UI Developer
34. Let us try GraphQL
35. GraphQL features
36. 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/
37. GraphQL features https://www.apollographql.com/docs/ Schema Query, Mutations Resolvers
38. What if we need filtered values?
39. Filtered values What if we need filtered values?
40. Filtered values Resolvers What if we need filtered values?
41. Resolvers
42. Resolvers
43. Resolvers
44. State management
45. No need for additional lib X
46. Don’t be afraid of the network
47. • 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
48. GraphQL is a paradigm shift
49. Refactor!
54. Refactor stats!
56. Should you move?
57. I don’t know
58. Do you have control over APIs ? Ask yourself
59. How important is offline usage? Ask yourself
60. How complex is your state? Ask yourself
61. How expensive are the network calls? Ask yourself
63. Outline State of GraphQL @ PayPal Redux 101 and GraphQL 101 Transitioning from Redux -> GraphQL
64. Outline State of GraphQL @ PayPal Redux 101 and GraphQL 101 Transitioning from Redux -> GraphQL
65. Transition @ PayPal
66. /…/API(s) Server DB/API(S) Response /graphql DB/.. Res.. Schema Before After
67. store Client actions/ reducers connected Apollo Query Mutation Schema resolver Before After
68. ♥
69. By The Numbers
70. At PayPal, 33 teams are building and consuming GraphQL APIs As of a month ago, probably more now…
71. Eg: PayPal Checkout, Onboarding, PayPal.me, iOS and Android Apps
73. Community of ~200 developers interested (and using) GraphQL
74. Challenges of GraphQL Caching Schema sharing Difficult in implementing - file uploading
75. Challenges of GraphQL Instrumentation
76. @shrutikapoor08 @perumalcsbe Thanks!
77. We’re hiring! :-) @shrutikapoor08 @perumalcsbe https://www.paypal.com/jobs