React - Relay - GraphQL

Overview how to work React, Relay and GraphQL together.

This talk was:
Organized by FEMUGSP (https://sp.femug.com/t/femug-sp-31-cubo/668)
At Cubo (https://cubo.network/)

Transcript

1. React - Relay - GraphQL
2. @igorapa
3. https://www.loggi.com
4. http://facebook.github.io/react/
5. What is React? A JavaScript library for building user interfaces Just the UI - Virtual DOM - Data Flow Components
6. http://blog.koalite.com/wp-content/uploads/react-info-flow.png
7. http://i.imgur.com/y2r2eh7.png
8. http://facebook.github.io/react/docs/getting-started.html var React = require('react'); var ReactDOM = require('react-dom');
9. Why React? Simple - Declarative - Reusable and Composable Components - JSX
10. without JSX > https://jsfiddle.net/reactjs/5vjqabv3/ var Hello = React.createClass({ displayName: 'Hello', render: function() { return React.createElement("div", null, "Hello ", this.props.name); } }); ReactDOM.render( React.createElement(Hello, {name: "World"}), document.getElementById('container') );
11. with JSX > https://jsfiddle.net/reactjs/69z2wepo/ var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); ReactDOM.render( <Hello name="World" />, document.getElementById('container') );
12. Console
13. http://busypeoples.github.io/img/lifecycle_init.png
14. http://graphql.org/
15. What is GraphQL? GraphQL is a data query language and runtime designed and used at Facebook to request and deliver data to mobile and web apps since 2012. Declarative - Compositional - Strong Typed
16. https://cldup.com/ysnmIMhqRU.png
17. https://github.com/graphql/swapi-graphql
18. https://github.com/graphql/swapi-graphql
19. Why GraphQL? - Maintainability - Single-round trip - No over-fetching (no more no less) -
20. { user(id: 30) { name, foo: friend(id: 2) { name } bar: friend(id: 13) { name, email } } } Aliases
21. { "data": { "user": { "name": "Igor APA", "foo": { "name": "Foo" }, "bar": { "name": "Bar", "email": "bar@bar.com" } } } } Aliases
22. Fragment > http://graphql.org/docs/queries/ { luke: human(id: "1000") { ...HumanFragment } leia: human(id: "1003") { ...HumanFragment } } fragment HumanFragment on Human { name homePlanet }
23. Fragment > http://graphql.org/docs/queries/ { "data": { "luke": { "name": "Luke Skywalker", "homePlanet": "Tatooine" }, "leia": { "name": "Leia Organa", "homePlanet": "Alderaan" } } }
24. import { GraphQLID, GraphQLInt, GraphQLList, GraphQLSchema, GraphQLString, GraphQLNonNull, GraphQLObjectType, } from 'graphql'; Server Schema.js
25. let Schema = new GraphQLSchema({ query: new GraphQLObjectType({ name: 'Query', fields: () => ({ store: { type: storeType, resolve: () => store } }) }), mutation: new GraphQLObjectType({ name: 'Mutation', fields: () => ({ createData: createDataMutation }) }) }); export default Schema; Server Schema.js
26. server.js app.use('/graphql', GraphQLHTTP({ schema, graphiql: true }));
27. Api.js import {post} from 'jquery'; import ServerActions from './actions/ServerActions'; let API = { fetchDatas() { post('/graphql', { query: `{ value { _id, title, url } }` }).done(resp => { ServerActions.receiveDatas(resp.data.value); }); } }; export default API;
28. https://facebook.github.io/relay/
29. What is Relay? A JavaScript framework for building data-driven React Applications Declarative - Colocation - Mutations
30. https://facebook.github.io/react/img/blog/relay-components/relay-architecture.png
31. Main.js class HomeRoute extends Relay.Route { static routeName = 'Home'; static queries = { store: (Component) => Relay.QL` query AppQuery { store { ${Component.getFragment('store')} } } ` } } ReactDOM.render( <Relay.RootContainer Component={App} route={new HomeRoute()} />, document.getElementById('foo') );
32. App.js class App extends React.Component { render() {…} } App = Relay.createContainer(App, { initialVariables: { limit: 30 }, fragments: { store: () => Relay.QL` fragment on Store { dataConnection(first: $limit) { edges { node { id, ${TableItem.getFragment('data')} } } } } ` } }); export default App;
33. App.js let bar = this.props.store.dataConnection.edges.map(...);
34. TableItem.js class TableItem extends React.Component { render() {…} } TableItem = Relay.createContainer(TableItem, { fragments: { data: () => Relay.QL` fragment on Data { url, title } ` } }); export default TableItem;
35. http://sgwilym.github.io/relay-visual-learners/
36. Why Relay? Caching - Pagination - Error Handling - Rollbacks - Optimistic Mutations
37. How does it relate to Flux? At Facebook, they have apps built entirely using Flux, entirely using Relay, or with both.
38. Conclusion React presents GraphQL is the referee between client and server Relay works hard
39. Are we in the future?
40. @igorapa Thank you!