Slide 1
Slide 1 text
Je m'appelle Kitze !
Slide 2
Slide 2 text
State management
in a GraphQL era
Slide 3
Slide 3 text
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.
Slide 4
Slide 4 text
REST
/api/currentUser/activity
/api/currentUser/friends
/api/user/5/activity
/api/user/5/likedPosts
Slide 5
Slide 5 text
GraphQL
query {
currentUser {
activity {
posts {
title
dateCreated
}
}
friends {
name
avatarUrl
activity {
likedPosts {
id
imageUrl
}
}
}
}
}
Slide 6
Slide 6 text
SPAs ruined everything
SPAs ruined everything
Slide 7
Slide 7 text
State management
Data
Forms Routing
Tabs
Navigation
Menus
Filters
Date pickers
Checkboxes
Inputs
Slide 8
Slide 8 text
Data is the #1 reason why
state management is hard
Slide 9
Slide 9 text
Data fetching
Caching
Reading
Cache invalidating
Slide 10
Slide 10 text
jQuery vs MooTools
Angular vs Ember
GraphQL vs Rest
Redux vs MobX
React vs Vue
Apollo vs Relay
Hillary vs Trump
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Trump is great…
on a golf court.
Slide 13
Slide 13 text
Examples
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
GraphQL
Slide 18
Slide 18 text
@graphql(gql`
query {
todos {
title
date
}
}
`)
class Todos extends Component {
render(){
const {data: {todos}} = this.props;
-
{todos.map(todo =>
- {todo.title} - {todo.date} )
Slide 19
Slide 19 text
We were fixing the sink
instead of the well
Slide 20
Slide 20 text
the sink = state management
the well = REST apis
Slide 21
Slide 21 text
State management
Data
Forms Routing
Tabs
Navigation
Menus
Filters
Date pickers
Checkboxes
Inputs
Slide 22
Slide 22 text
State management
Forms
Routing
Tabs
Navigation
Menus
Filters
Date pickers
Checkboxes
Inputs
Slide 23
Slide 23 text
Do we even need complex state-
management library when using
GraphQL?
Slide 24
Slide 24 text
When using GraphQL, in 90% of
the cases, you won’t need Redux,
MobX, RxJS or *insert hipster
state-management library here*
Slide 25
Slide 25 text
If you still decide to use one, you
just really like over-engineering
¯\_(ツ)_/¯
Slide 26
Slide 26 text
Thank you
@thekitze
reactacademy.io
@kitze
@kitze