Data Fetching for React Applications

Data fetching is still a tricky problem, especially as applications become more complex. We'll describe the approach Facebook uses to make data fetching simple for developers, even as a project grows to include dozens of developers and the application becomes as complex as Facebook's news feed.

Transcript

2. Data Fetching for React Applications Dan Schafer & Jing Chen @dlschafer @jingc
3. React
4. Flux
5. Flux Dispatcher Action Store View Action
6. Flux Dispatcher Action Store View Action Server
7. Flux Dispatcher Action Store View Action Server
10. <FriendList>
11. <FriendList> <FriendListItem>
12. <FriendList> <FriendListItem> <FriendInfo>
13. Server <FriendList> <FriendListItem> <FriendInfo>
14. Server <FriendList> <FriendListItem> <FriendInfo>
15. Server <FriendList> <FriendListItem> <FriendInfo>
16. Server <FriendList> <FriendListItem> <FriendInfo>
17. Server <FriendList> <FriendListItem> <FriendInfo>
18. Server <FriendList> <FriendListItem> <FriendInfo>
19. Server <FriendList> <FriendListItem> <FriendInfo>
20. Response Shape
21. Composition
22. Composition <FriendListItem> <FriendInfo>
24. { id: 3500401, name: "Jing Chen", is_viewer_friend: true, mutual_friends: { count: 195 }, profile_picture: { uri: "http://…", width: 50, height: 50 } }
25. { id: 3500401, name: "Jing Chen", is_viewer_friend: true, mutual_friends: { count: 195 }, profile_picture: { uri: "http://…", width: 50, height: 50 } }
26. { id, name, is_viewer_friend, mutual_friends { count }, profile_picture { uri, width, height } }
27. { id, name, is_viewer_friend, mutual_friends { count }, profile_picture { uri, width, height } }
28. GraphQL
29. GraphQL { { "id": "1572451031", "name": "Daniel Schafer" } } { id, name }
30. GraphQL { "1572451031": { "id": "1572451031", "name": "Daniel Schafer" } } node(1572451031) { id, name }
31. GraphQL { "1572451031": { "id": "1572451031", "name": "Daniel Schafer" } } node(1572451031) { id, name, birthdate { month, day } }
32. GraphQL { "1572451031": { "id": "1572451031", "name": "Daniel Schafer", "birthdate": { "month": 1, "day": 17, } } } node(1572451031) { id, name, birthdate { month, day } }
33. GraphQL { "1572451031": { "id": "1572451031", "name": "Daniel Schafer", "birthdate": { "month": 1, "day": 17, } } } node(1572451031) { id, name, birthdate { month, day }, friends.first(1) { cursor, node { name } } }
34. GraphQL { "1572451031": { "id": "1572451031", "name": "Daniel Schafer", "birthdate": { "month": 1, "day": 17, }, "friends": [{ "cursor": "3500401", "node": { "name": "Jing Chen", } }] } } node(1572451031) { id, name, birthdate { month, day }, friends.first(1) { cursor, node { name } } }
35. GraphQL { "1572451031": { "id": "1572451031", "name": "Daniel Schafer", "birthdate": { "month": 1, "day": 17, }, "friends": [{ "cursor": "3500401", "node": { "name": "Jing Chen", } }] } } node(1572451031) { id, name, birthdate { month, day }, friends.after(3500401).first(2) { cursor, node { name } } }
36. GraphQL { "1572451031": { "id": "1572451031", "name": "Daniel Schafer", "birthdate": { "month": 1, "day": 17, }, "friends": [{ "cursor": "4802170", "node": { "name": "Lee Byron", } }, { "cursor": "3700061", "node": { "name": "Nick Schrock", } }] } } node(1572451031) { id, name, birthdate { month, day }, friends.after(3500401).first(2) { cursor, node { name } } }
38. Response Shape
40. Response Shape
41. var FriendInfo = React.createClass({ render: function() { return ( <div> <span>{this.props.user.name}</span> <span>{this.props.user.mutual_friends.count} mutual friends</span> </div> ); } }); Response Shape
42. var FriendInfo = React.createClass({ statics: { queries: { } } render: function() { return ( <div> <span>{this.props.user.name}</span> <span>{this.props.user.mutual_friends.count} mutual friends</span> </div> ); } }); Response Shape
43. var FriendInfo = React.createClass({ statics: { queries: { user: function() { return graphql` User { name, mutual_friends { count } } `; } } }, render: function() { return ( <div> <span>{this.props.user.name}</span> <span>{this.props.user.mutual_friends.count} mutual friends</span> </div> ); } }); Response Shape
44. var FriendInfo = React.createClass({ statics: { queries: { user: function() { return graphql` User { name, mutual_friends { count } } `; } } }, render: function() { return ( <div> <span>{this.props.user.name}</span> <span>{this.props.user.mutual_friends.count} mutual friends</span> </div> ); } }); Response Shape
45. var FriendInfo = React.createClass({ statics: { queries: { user: function() { return graphql` User { name, mutual_friends { count } } `; } } }, render: function() { return ( <div> <span>{this.props.user.name}</span> <span>{this.props.user.mutual_friends.count} mutual friends</span> </div> ); } }); Response Shape
46. var FriendInfo = React.createClass({ statics: { queries: { user: function() { return graphql` User { name, mutual_friends { count } } `; } } }, render: function() { return ( <div> <span>{this.props.user.name}</span> <span>{this.props.user.mutual_friends.count} mutual friends</span> </div> ); } }); Response Shape
47. var FriendInfo = React.createClass({ statics: { queries: { user: function() { return graphql` User { name, mutual_friends { count } } `; } } }, render: function() { return ( <div> <span>{this.props.user.name}</span> <span>{this.props.user.mutual_friends.count} mutual friends</span> </div> ); } }); Response Shape
48. Composition
50. Composition
51. Composition var FriendListItem = React.createClass({ render: function() { return ( <div> <ProfilePic user={this.props.user} /> <FriendInfo user={this.props.user} /> </div> ); } });
52. Composition var FriendListItem = React.createClass({ statics: { queries: { user: function() { return graphql` User { ?? ?? } `; } } }, render: function() { return ( <div> <ProfilePic user={this.props.user} /> <FriendInfo user={this.props.user} /> </div> ); } });
53. Composition var FriendListItem = React.createClass({ statics: { queries: { user: function() { return graphql` User { ${ProfilePic.getQuery('user')}, ${FriendInfo.getQuery('user')} } `; } } }, render: function() { return ( <div> <ProfilePic user={this.props.user} /> <FriendInfo user={this.props.user} /> </div> ); } });
54. Lifecycle
55. Lifecycle var FriendListItem = React.createClass({ statics: { queries: { user: function() { return graphql` User { ${ProfilePic.getQuery('user')}, ${FriendInfo.getQuery('user')} } `; } } } }); Static View
56. Lifecycle var FriendListItem = React.createClass({ statics: { queries: { user: function() { return graphql` User { ${ProfilePic.getQuery('user')}, ${FriendInfo.getQuery('user')} } `; } } } }); Static View FriendListItem
57. Lifecycle Query { ')}, ')} Static View
58. Lifecycle Query { ')}, ')} Static View ProfilePic FriendInfo FriendListItem
59. Lifecycle Query Server ew
60. Lifecycle node(1572451031) { name, mutual_friends { count }, profile_picture { uri, width, height } } Query Server ew
61. Lifecycle y Server Data
62. Lifecycle { "1572451031" : { name: "Daniel Schafer", mutual_friends: { count: 195 }, profile_picture: { uri: "http://...", width: 50, height: 50 } } } y Server Data
63. Lifecycle Server Data Store
64. Lifecycle Server Data Store Flux
65. Lifecycle a Store Views
66. Lifecycle <div> <ProfilePic user={this.props.user} /> <FriendInfo user={this.props.user} /> </div> a Store Views
67. Lifecycle Query Server Data Store Views Static View
68. var FriendInfo = React.createClass({ statics: { queries: { user: function() { return graphql` User { name, mutual_friends { count } } `; } } }, render: function() { return ( <div> <span>{this.props.user.name}</span> <span>{this.props.user.mutual_friends.count} mutual friends</span> </div> ); } }); Response Shape
69. Lifecycle Query Server Data Store Views Static View
70. Relay
71. Updating Queries
72. Updating Queries Dispatcher Action Store View Action Server
73. Updating Queries Server Data
74. Updating Queries Server Data FriendList
75. Updating Queries Server Data FriendList FriendListItem
76. Updating Queries Server Data FriendList FriendListItem
77. Updating Queries FriendListItem
78. Updating Queries FriendListItem
79. Pagination
80. Pagination
81. Pagination var FriendList = React.createClass({ render: function() { return ( <div> { this.props.viewer.friends.map( function(user) { return <FriendListItem user={user} />; } ) } </div> ); } });
82. Pagination var FriendList = React.createClass({ statics: { queries: { viewer: function() { return graphql` Viewer { friends { ${FriendListItem.getQuery(‘user’)}, } } `; } } }, render: function() { ... } });
83. Pagination var FriendList = React.createClass({ statics: { queries: { viewer: function() { return graphql` Viewer { friends.first(10) { ${FriendListItem.getQuery(‘user’)}, } } `; } } }, render: function() { ... } });
84. Pagination var FriendList = React.createClass({ statics: { queryParams: {count: 10}, queries: { viewer: function(params) { return graphql` Viewer { friends.first(${params.count}) { ${FriendListItem.getQuery(‘user’)}, } } `; } } }, render: function() { ... } });
85. Pagination var FriendList = React.createClass({ statics: { queryParams: {count: 10}, queries: { viewer: function(params) { return graphql` Viewer { friends.first(${params.count}) { ${FriendListItem.getQuery(‘user’)}, } } `; } } }, onScrollLoad: function() { this.setQueryParams({count: this.queryParams.count + 5}); }, render: function() { ... } });
86. Query Validation
87. Mutations
88. Optimistic Updates
89. What’s Next?
90. Thanks! @dlschafer @jingc