sibelius seraphini - relay modern
TRANSCRIPT
![Page 1: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/1.jpg)
Relay ModernDeclarative Data Fetching
Sibelius Seraphini
![Page 2: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/2.jpg)
Sibelius Seraphini
@sibelius @sseraphini
2
![Page 3: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/3.jpg)
Data Fetching
Which problem does it solve?
3
![Page 4: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/4.jpg)
- Duplicate fetch logic- Caching is hard- Data fetching is hard to optimize- Hard to handle different endpoints- Pagination can be tricky- Underfetching- Overfetching
Data Fetching is tricky
4
![Page 5: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/5.jpg)
5
![Page 6: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/6.jpg)
6
![Page 7: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/7.jpg)
7
![Page 8: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/8.jpg)
8
![Page 9: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/9.jpg)
- Declarative (declare data your component needs)
- Colocating (component + data requirement)
- Performance- Common patterns (e.g., pagination)
Value proposition
9
![Page 10: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/10.jpg)
- Subscriptions- Mutations
- Data consistency- Optimistic updates- Error handling
Value Proposition
10
![Page 11: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/11.jpg)
- Static queries- Ahead of time code generation- Compat mode- Simpler and more predictable API- More light-weight (20% less)- Faster performance- Persisted Queries- Garbage Collection
What's new in Relay Modern
11
![Page 12: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/12.jpg)
- GraphQL Subscriptions & Live Queries
- Injectable Custom Field Handlers- Simpler Mutation API- Client Schema Extensions- Flowtype Generation- Extensible Core- Closer API to GraphQL Spec
- no need for Viewer (Relay Classic)
What's new in Relay Modern
12
![Page 13: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/13.jpg)
Relay Modern
Concepts
13
![Page 14: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/14.jpg)
const UserRow = ({ user }) => (
<View>
<Text>{user.name}</Text>
<Text>{user.email}</Text>
</View>
);
const UserRowFragmentContainer = createFragmentContainer(UserRow, {
user: graphql`
fragment UserRow_user on User {
name
}
`,
});
Data Components (aka containers)
14
![Page 15: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/15.jpg)
<QueryRenderer
environment={environment}
query={graphql`
query UserQuery($id: ID!) {
user(id: $id) {
...UserRow_user
}
}
`}
variables={{id: '110798995619330'}}
render={({error, props}) => {
if (error) {
return <View>{error.message}</View>;
}
if (props) {
return <UserFragmentContainer {...props} />
}
return <View>Loading</View>;
}}
/>
QueryRenderer (root of Relay tree)
15
![Page 16: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/16.jpg)
RefetchContainerexport default createRefetchContainer(FeedStories, {
feed: graphql`
fragment FeedStories_feed on Feed
@argumentDefinitions(
count: {type: "Int", defaultValue: 10}
) {
stories(first: $count) {
edges {
node {
id
...Story_story
}
}
}
}
`
},
graphql`
query FeedStoriesRefetchQuery($count: Int) {
feed {
...FeedStories_feed @arguments(count: $count)
}
}
`,
); 16
![Page 17: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/17.jpg)
RefetchContainer - refetch
_loadMore() {
// Increments the number of stories being rendered by 10.
const refetchVariables = fragmentVariables => ({
count: fragmentVariables.count + 10,
});
this.props.relay.refetch(refetchVariables, null);
}
17
![Page 18: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/18.jpg)
Mutations
- A Write then Read
const mutation = graphql`
mutation AddShipMutation($input: AddShipData!) {
addShip(input: $input) {
faction {
ships {
id
}
}
newShipEdge
}
}
`;
18
![Page 19: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/19.jpg)
Mutations - Update Store
const configs = [{
type: 'RANGE_ADD',
parentID: 'shipId',
connectionInfo: [{
key: 'AddShip_ships',
rangeBehavior: 'append',
}],
edgeName: 'newShipEdge',
}];
- RANGE_ADD - add node to edge- RANGE_DELETE - remove node from edge- NODE_DELETE - remove node from store- updater - imperative API
19
![Page 20: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/20.jpg)
Subscriptions
const subscription = graphql`
subscription MarkReadNotificationSubscription(
$storyID: ID!
) {
markReadNotification(storyID: $storyID) {
notification {
seenState
}
}
}
`;
20
![Page 21: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/21.jpg)
Debugging
21
![Page 22: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/22.jpg)
Resources
22
- https://github.com/sibelius/ReactNavigationRelayModern
- https://reactjs.org/blog/2015/02/20/introducing-relay-and-graphql.html
- https://facebook.github.io/relay/- https://code-cartoons.com/a-cartoon-intro-to-fa
cebook-s-relay-part-1-3ec1a127bca5
![Page 23: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/23.jpg)
I didn't mention
23
- GraphQL/Relay compiler- Babel plugin Relay- Live Queries- PaginationContainer- Mutation Updater Imperative API- Relay Directives- Relay Network Layer- Relay Environment- Cache
![Page 24: Sibelius Seraphini - Relay Modern](https://reader034.vdocuments.net/reader034/viewer/2022051710/5a6d79607f8b9ac7418b6227/html5/thumbnails/24.jpg)
Is Relay Modern the Future?
Sibelius