GraphQL with Redux

It's about the benefits of GraphQL and how it makes requesting data from the front-end more powerful. Why Facebook saw the need to build Relay, a central store that keeps all server responses in one place and finally it makes the case for replacing it with Redux, a very common flux implementation these days.

Transcript

1. GraphQL with Redux
2. Mike Langmayr Front-end developer at BT @codewhisperer
3. React Relay GraphQL + Redux
4. React Redux GraphQL
5. What is GraphQL? a data querying language requires a server - server side technology invented for Facebook's native apps
6. Syntax of GraphQL Request // User { user(id: "1") { name, age } } Response // User { "data": { "user": { "name": "Mike", "age": "33" } } }
7. Advantages of GraphQL single endpoint speci c data can be queried co-location of queries and the view code
8. Co-location of queries and the view code @connect(state => ({ query: state.query })) export default class BucketDrops extends React.Component { componentDidMount() { this.props.dispatch(getGraph(` { user(id:"3") { name } }`)); } render() { return ( <Page> <If condition={this.props.query.data}> User name: {this.props.query.data.name} </If> </Page> ); } }
9. What is Relay? a data-fetching framework for React using GraphQL inspired by Flux container pattern components are re-rendered when data changes server data only works mostly with React
10. What is Redux? implementation of Flux | one store Container/Presentation components pattern React integration but framework independent
11. One store for local data and server data
12. Caveats Missing out on some Relay features Caching! Pagination React integration Projects like Cashay help
13. Thanks Code samples and presentation will be online tonight. Resources: https://medium.com/@matt.krick/replacing-relay-with- redux-2990c81aa807 https://www.reindex.io/blog/redux-and-relay/ https://github.com/mattkrick/cashay