GraphQL_Summit_2019.pdf

Transcript

1. GraphQL & State Management Shruti Kapoor
2. @shrutikapoor08 Shruti Kapoor
3. [ GraphQL, React, JavaScript ] @shrutikapoor08
4. #DEVJOKES
5. #DEVJOKES Halloween Edition
6. Hey officer! How did the hackers escape?
7. They just ransomware
8. Why do programmers get confused between Halloween and Christmas?
9. (31) OCT = (25) DEC
10. Did you hear about the witch who was off by two when casting a hex?
11. They failed to make the target DEAD and made them DEAF instead!
12. github.com/ shrutikapoor08/devjokes @shrutikapoor08
13. tinyurl.com/graphqlsummit The slides are available on twitter @shrutikapoor08
14. State management using React Hooks @shrutikapoor08
15. Think in terms of data Goal
16. Outline Different types of state Apollo and Hooks React Hooks and GraphQL Hooks 101
17. STATE GLOBAL STATE LOCAL STATE
18. STATE • Application state • Data across all components • Router data GLOBAL STATE
19. STATE GLOBAL STATE Authorization
20. STATE GLOBAL STATE LOCAL STATE
21. LOCAL STATE STATE • Local component logic • Forms
22. LOCAL STATE STATE Forms
23. Different ways of managing state
24. • React Component State • ContextAPI • Redux • Mobx • mobx-state-tree • Hooks • Apollo Client Different ways of managing state @shrutikapoor08
25. • React Component State • ContextAPI • Redux • Mobx • mobx-state-tree •Hooks • Apollo Client Different ways of managing state @shrutikapoor08
26. Hooks
27. proposed in October 2018 released ~4 months later Hooks
28. proposed in October 2018 released ~4 months later Hooks React 16.8
29. proposed in October 2018 released ~4 months later Hooks
30. “More direct explanation of React” - Dan Abramov “
31. State management is hard Why Hooks?
33. Redux
34. Good Redux • Connect function to share data magically • No prop drilling
35. Good Redux Bad • Connect function to share data magically • No prop drilling • All state - local and global in store • Huge boilerplate
36. Context Provider
37. Good Context Provider • Lifts state up • No prop drilling
38. Good Context Provider Bad • Lifts state up • No prop drilling • All components that consume a provider are updated.
39. Why Hooks? Problem Solution Prop drilling Lift state up
40. Why Hooks? Problem Solution Boilerplate Use state without Class component
41. Why Hooks? Problem Solution Context reload Keep state close
42. useEffect useState useReducer useContext Hooks
43. • Replaces this.state • Used for shared components • Initialize state and auto-update useState Hooks
44. useState Hooks
45. useState Hooks
46. useState Hooks
48. • Update DOM • Accepts a func with effectful code • Similar to componentDidMount useEffect • Replaces this.state • Use for shared components • Initialize state and auto-update useState React Hooks
49. React Hooks useEffect
50. React Hooks useEffect
51. Another example useEffect
52. Another example useEffect Return function
53. useEffect useState useReducer useContext Hooks
54. useEffect useState useReducer useContext Hooks
55. Context API @shrutikapoor08
57. Read context <MyContext.Provider>
58. useReducer
59. useEffect useState useReducer useContext Hooks
60. Lets build a real(ish) app
61. CodeSandbox Link bit.ly/graphql-hooks-codesb github.com/shrutikapoor08/graphqlsummit2019
62. 1. Initialize your state ( initialState )
63. 1. Initialize your state ( initialState ) 2. Call useReducer with the initialState.
64. 1. Initialize your state ( initialState ) 2. Call useReducer with the initialState. 3. Figure out which top level component should have context and setup context.
65. 1. Initialize your state ( initialState ) 2. Call useReducer with the initialState. 3. Figure out which top level component should have context and setup context. 4. Pass in the dispatch returned from useReducer to the Context provider API so that children have access to dispatch.
66. 1. Initialize your state ( initialState ) 2. Call useReducer with the initialState. 3. Figure out which top level component should have context and setup context. 4. Pass in the dispatch returned from useReducer to the Context provider API so that children have access to dispatch. 5. Hook up Graphql API to a component using useEffect.
67. 1. Initialize your state ( initialState ) 2. Call useReducer with the initialState. 3. Figure out which top level component should have context and setup context. 4. Pass in the dispatch returned from useReducer to the Context provider API so that children have access to dispatch. 5. Hook up Graphql API to a component using useEffect. 6. Use useContext and useReducer to receive and update global application state.
68. 1. Initialize your state ( initialState ) 2. Call useReducer with the initialState. 3. Figure out which top level component should have context and setup context. 4. Pass in the dispatch returned from useReducer to the Context provider API so that children have access to dispatch. 5. Hook up Graphql API to a component using useEffect. 6. Use useContext and useReducer to receive and update global application state. 7. Use useState for local state.
69. Apollo client with 
 Hooks @shrutikapoor08 v 2.6
70. @shrutikapoor08 useQuery useMutation
72. v 2.6
73. v 2.6
74. v 2.6
75. github.com/shrutikapoor08/ graphqlsummit2019 bit.ly/graphql-hooks-codesb @shrutikapoor08
76. We’re hiring! :-) http://bit.ly/paypal-scale [GraphQL, React, Gatsby] @shrutikapoor08
77. @shrutikapoor08
78. Thanks! @shrutikapoor08