Apresentado na React Conf Brasil, em São Paulo, 7 de Outubro de 2017 #reactconfbr I'm the creator of React Brasil. I'm the software technical lead on Entria. Living on the bleeding edge (React Native, Relay, GraphQL, Redux, Redux-Saga, Koa), I love to contribute to open source projects. https://github.com/sibelius @sseraphini - Patrocínio: Pipefy, Globo.com, Meteor, Apollo, Taller, Fullcircle, Quanto, Udacity, Cubos, Segware, Entria - Apoio: Concrete, Rung, LuizaLabs, Movile, Rivendel, GreenMile, STQ, Hi Platform - Promoção: InfoQ, DevNaEstrada, CodamosClub, JS Ladies, NodeBR, Training Center, BrazilJS, Tableless, GeekHunter - Afterparty: An English Thing

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