GraphQL and state management

Transcript

1. GraphQL & State Management Shruti Kapoor
2. @shrutikapoor08
3. [GraphQL, React, JavaScript]
4. #DEVJOKES
5. @shrutikapoor08
9. Google Dev Fest 2017
10. @shrutikapoor08
11. GraphQL & State Management
12. GraphQL & State Management
14. Form List Call To Action Authorization
15. GraphQL & State Management
16. GraphQL & State Management
17. GraphQL
21. UI Developer API Developer
22. API Developer UI Developer
23. API Developer UI Developer
25. A query language for your API GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
26. A query language for your API GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
27. Describes the functionality available to the clients Schema GraphQL features https://www.apollographql.com/docs/
28. Schema GraphQL features https://www.apollographql.com/docs/
29. A request to receive or modify information from the server Query, Mutations Schema GraphQL features https://www.apollographql.com/docs/
30. Query, Mutations Schema GraphQL features https://www.apollographql.com/docs/
31. Query, Mutations Schema A function that returns value for a field Resolvers GraphQL features https://www.apollographql.com/docs/
32. Query, Mutations Schema A function that returns value for a field Resolvers GraphQL features https://www.apollographql.com/docs/
33. GraphQL features https://www.apollographql.com/docs/ Schema Query, Mutations Resolvers
34. Let us try GraphQL
35. How do clients use our data?
36. What do you need to do? API Developer UI Developer
37. API Developer UI Developer Get users
38. API Developer UI Developer Filter users for user_id
39. API Developer UI Developer Get name of user with user_id
40. API Developer UI Developer Get account balance for user_id
41. How many REST calls?
42. API Developer UI Developer
43. What if we need filtered values? API Developer UI Developer Filter users for user_id
44. What if we need filtered values? Server Offload
45. What if we need filtered values? Server Offload Resolvers =
46. Filtered values What if we need filtered values?
47. Resolvers
48. Resolvers
49. Resolvers
50. Different ways of managing state
51. • Component State • ContextAPI • Redux • Mobx • mobx-state-tree • Cerebral • freactal • unistore • Vuex Different ways of managing state
52. • setState • ContextAPI •Redux • Mobx • mobx-state-tree • Cerebral • freactal • unistore • Vuex Different ways of managing state
53. Redux
54. 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/
55. Store How Redux works
56. Store How Redux works State updated = UI re-rendered XYZ
57. Store How Redux works store.dispatch(action) State updated = UI re-rendered XYZ
58. Store How Redux works State updated = UI re-rendered XYZ calls reducer
59. Store How Redux works State updated = UI re-rendered XYZ calls API Middleware
60. Store How Redux works State updated = UI re-rendered XYZ Normalized data data
61. Store How Redux works State updated = UI re-rendered XYZ store.dispatch(“DONE FETCHING”)
62. Store How Redux works
63. 
 Advantages of Redux
64. • Predictable • Single source of truth • Easy to test • Huge ecosystem
65. Challenges of Redux
66. • Immutability • Huge boilerplate • Normalize the data
67. Refactor!
71. Refactor stats!
73. Managing state in GraphQL
74. No need for additional lib X
75. Leverage the network
76. Context API
77. https://codesandbox.io/s/lpp391lymm?from-embed
78. Apollo Client
81. Decisions
82. Do you have control over APIs ? Ask yourself
83. How important is offline usage? Ask yourself
84. How complex is your state? Ask yourself
85. How expensive are the network calls? Ask yourself
86. • When using GraphQL, you may not need a state management library. • Usually react state or context is enough for passing data. • Apollo-link-state can be used for state management. Lessons Learnt
87. We’re hiring! :-) https://www.paypal.com/jobs @shrutikapoor08
88. Thanks! @shrutikapoor08