1.
Relay Modern
Declarative Data Fetching
Sibelius Seraphini

2.
Sibelius Seraphini
@sibelius @sseraphini
2

3.
Data Fetching
Which problem does it solve?
3

4.
- 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

5.
5

6.
6

7.
7

8.
8

9.
- Declarative (declare data your
component needs)
- Colocating (component + data
requirement)
- Performance
- Common patterns (e.g., pagination)
Value proposition
9

10.
- Subscriptions
- Mutations
- Data consistency
- Optimistic updates
- Error handling
Value Proposition
10

11.
- 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

12.
- 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

13.
Relay Modern
Concepts
13

14.
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
email
}
`,
});
Data Components (aka containers)
14

15.
<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

16.
RefetchContainer
export 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

17.
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

18.
Mutations
- A Write then Read
const mutation = graphql`
mutation AddShipMutation($input: AddShipData!) {
addShip(input: $input) {
faction {
ships {
id
}
}
newShipEdge
}
}
`;
18

19.
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

20.
Subscriptions
const subscription = graphql`
subscription MarkReadNotificationSubscription(
$storyID: ID!
) {
markReadNotification(storyID: $storyID) {
notification {
seenState
}
}
}
`;
20

21.
Debugging
21

22.
Resources
22
- https://github.com/sibelius/ReactNavigationRel
ayModern
- 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

23.
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

24.
Is Relay Modern the Future?
Sibelius