State management in a GraphQL era [5 min version]

External state management frameworks like Redux and MobX definitely helped with the problem of state-management, especially when the data is fetched from a REST endpoint.

But now that we're using GraphQL to take care of the data, is an external state-management library even needed?

Can GraphQL coexist with the other state management frameworks? What about server-side rendering? What are the pros and cons of each combination?

We'll find out what's the best way to approach this in 2017.

Transcript

1. Je m'appelle Kitze !
2. State management in a GraphQL era
3. TL;DR GraphQL is the thing that’s eventually gonna replace REST, but you keep telling yourself that you don’t need to learn it.
4. REST /api/currentUser/activity /api/currentUser/friends /api/user/5/activity /api/user/5/likedPosts
5. GraphQL query { currentUser { activity { posts { title dateCreated } } friends { name avatarUrl activity { likedPosts { id imageUrl } } } } }
6. SPAs ruined everything SPAs ruined everything
7. State management Data Forms Routing Tabs Navigation Menus Filters Date pickers Checkboxes Inputs
8. Data is the #1 reason why state management is hard
9. Data fetching Caching Reading Cache invalidating
10. jQuery vs MooTools Angular vs Ember GraphQL vs Rest Redux vs MobX React vs Vue Apollo vs Relay Hillary vs Trump
11. Mistake: Asking ❓what’s better❓ instead of ✅ what’s suitable for my app ✅ what’s suitable for my team ✅ what’s suitable for our use-case
12. Trump is great… on a golf court.
13. Examples
14. const fetchTodos = () => dispatch => { dispatch({type: 'FETCH_TODOS_INIT'}); api.fetchTodos().then(todos => { dispatch({type: 'FETCH_TODOS_SUCCESS', todos}); }).catch(error => { dispatch({type: 'FETCH_TODOS_FAIL', error}) }) }; Redux - async action
15. const todosReducer = ( state = {loading: false, todos: [], error: null}, action ) => { switch (action.type) { case 'FETCH_TODOS_INIT': { return { ...state, loading: true}; } case 'FETCH_TODOS_SUCCESS': { return { ...state, loading: false, todos: action.todos}; } case 'FETCH_TODOS_FAIL': { return { ...state, loading: false, error: action.error}; } } }; Redux - reducer
16. class App { @observable todos = []; @observable loading = false; @observable error = null; @action fetchTodos = () => { this.loading = true; api.fetchTodos().then(todos => { this.todos = todos; this.loading = false; }).catch(error => { this.error = error; this.loading = false; }); } } MobX
17. GraphQL
18. @graphql(gql` query { todos { title date } } `) class Todos extends Component { render(){ const {data: {todos}} = this.props; <ul> {todos.map(todo => <li> {todo.title} - {todo.date} </li> ) </ul> } } Apollo
19. We were fixing the sink instead of the well
20. the sink = state management the well = REST apis
21. State management Data Forms Routing Tabs Navigation Menus Filters Date pickers Checkboxes Inputs
22. State management Forms Routing Tabs Navigation Menus Filters Date pickers Checkboxes Inputs
23. Do we even need complex state- management library when using GraphQL?
24. When using GraphQL, in 90% of the cases, you won’t need Redux, MobX, RxJS or *insert hipster state-management library here*
25. If you still decide to use one, you just really like over-engineering ¯\_(ツ)_/¯
26. Thank you @thekitze reactacademy.io @kitze @kitze