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