Реклама Relay

1. Relay или не Relay

2. news.php
styles.css
scripts.js

3. news.php
styles.css
scripts.js
.pageHeader .user {
color: blue;
}
.comments .user {
color: red;
}

4. news.php
styles.css
scripts.js
.pageHeader .user {
color: blue;
}
.comments .user {
color: red;
}
$('.comments .user').click(...);

5. CommentList
├ CommentList.js
└ CommentList.css

6. 3
Story 1
by Jing
Lee: hi
Dan: hey
Story 2
by Yuzhi
Joe: yo

7. 3
Story 1
by Jing
Lee: hi
Dan: hey
Story 2
by Yuzhi
Joe: yo
<Story>
<CommentList>

8. 3
Story 1
by Jing
Lee: hi
Dan: hey
Story 2
by Yuzhi
Joe: yo
<Story>
<CommentList>
{
"comments": [
{
"text": "hi",
"author": {
"name": "Lee"
},
…
}
]
}

9. 3
Story 1
by Jing
Lee: hi
Dan: hey
Story 2
by Yuzhi
Joe: yo
<Story>
<CommentList>
☺
☺
☺
{
"comments": [
{
"text": "hi",
"author": {
"name": "Lee"
},
…
}
]
}

10. 3
Story 1
by Jing
Lee: hi
Dan: hey
Story 2
by Yuzhi
Joe: yo
<Story>
<CommentList>
☺
☺
☺
{
"comments": [
{
"text": "hi",
"author": {
"name": "Lee",
"picture": "pic.jpg"
},
…
}
]
}

11. GraphQL

12. {
me {
name
}
}
GraphQL

13. {
me {
name
}
}
{
"me": {
"name": "Pavel"
}
}
GraphQL

14. {
user(id: 1000) {
name
picture(size: 120) {
url
}
friends {
picture(size: 60) {
url
}
}
}
}

15. class CommentList extends React.Component {...}
export default Relay.createContainer(CommentList, {
fragments: {
comments: Relay.QL`
fragment on Comment @relay(plural: true) {
text
author {
name
picture
}
}
`,
},
});
Relay

17. class Story extends React.Component {
render() {
…<CommentList comments={story.comments} />…
}
}
export default Relay.createContainer(Story, {
fragments: {
story: Relay.QL`
fragment on Story {
text
comments {
${CommentList.getFragment('comments')}
}
}
`,
},
});

18. const UserQueries = {
user: Relay.QL`query { user(id: $userID) }`,
};
ReactDOM.render((
<Router>
<Route
path="/user/:userID"
component={User}
queries={UserQueries} />
</Router>
), mountNode);

19. const UserQueries = {
user: Relay.QL`query { user(id: $userID) }`,
};
ReactDOM.render((
<Router>
<Route
path="/user/:userID"
component={User}
queries={UserQueries} />
</Router>
), mountNode);

20. fragment on Viewer {
users(search: $pattern) {…}
}

21. fragment on Viewer {
users(search: $pattern) {…}
}
function onSearch(value) {
relay.setVariables({
pattern: value,
});
}

22. Cache
Item 1
Item 2
Item 3
Item 4
Item 3

23. Optimistic Updates

24. Optimistic Updates
getOptimisticResponse() {
return {
id: story.id,
likes: story.likes + 1,
};
}

25. • Caching
• Optimistic Updates
• Error Handling
• Retries
• Request Coordination
• Pagination
• State Management
• …

26. • Forms
• Local Storage
• Mutations
• …

27. Спасибо!