Slide 1
Slide 1 text
Relay
HTML5ͱ͔ษڧձ #65
Slide 2
Slide 2 text
@hokaccha
Slide 3
Slide 3 text
Relay
Slide 4
Slide 4 text
React
Slide 5
Slide 5 text
GraphQL
Slide 6
Slide 6 text
react-relay graphql-relay
GraphQL Relay Specification
Slide 7
Slide 7 text
• ϑϧελοΫͳϑϨʔϜϫʔΫ
• σʔλͷετΞAPIͷϋϯυϦϯάશ෦Δ
• αʔόʔଆͷ༷/࣮·Ͱ͋Δ
Slide 8
Slide 8 text
GraphQL
Slide 9
Slide 9 text
GraphQLͱ
• Facebook͕։ൃͨ͠ΫΤϦݴޠ
• ΫϥΠΞϯτ/αʔόʔؒͷΓऔΓʹΘΕΔ
• RESTRPCͱಉ͡ϨΠϠʔ
Slide 10
Slide 10 text
http://example.com/products/1
{
"id": 1,
"name": "foo",
"description": "..."
"image": {
"uri": "http://...",
"width": 120,
"height": 120
}
}
Slide 11
Slide 11 text
http://example.com/graphql
{
"product" : {
"id": 1,
"name": "foo",
"description": "..."
"image": {
"uri": "http://...",
"width": 120,
"height": 120
}
}
}
{
product(id: 1) {
id,
name,
description,
image(size: 120) {
uri,
width,
height
}
}
}
3FRVFTU 3FTQPOTF
Slide 12
Slide 12 text
• ඞཁͳϑΟʔϧυ͚ͩΛબՄೳ
• ωετͨ͠σʔλΛҰൃͰҾ͚Δ
• ܕ͕͋Δ
• etc..
Slide 13
Slide 13 text
GraphQL Relay Specification
• Global Object Identification
• Cursor Connections
• Input Object Mutations
Slide 14
Slide 14 text
Relay
Slide 15
Slide 15 text
• DECLARATIVE
• COLOCATION
• MUTATIONS
Slide 16
Slide 16 text
DECLARATIVE
Slide 17
Slide 17 text
ैདྷͷख๏
1. Πϕϯτ͕τϦΨʔ͞ΕΔ
2. αʔόʔʹϦΫΤετ͢Δ
3. ϨεϙϯεΛݩʹViewΛ࠶ߏங͢Δ
Slide 18
Slide 18 text
$el.find('.select').on('change', id => {
fetch(`/products/${id}`).then(product => {
$('.name').text(product.name);
$('.description').text(product.description);
});
});
Slide 19
Slide 19 text
ReactΛͬͨ߹
1. Πϕϯτ͕τϦΨʔ͞ΕΔ
2. αʔόʔʹϦΫΤετ͢Δ
3. ϨεϙϯεͷσʔλΛݩʹstateΛߋ৽͢Δ
• ࣗಈͰView͕ߋ৽͞ΕΔ
Slide 20
Slide 20 text
class AppComponent extends React.Component {
handleSelect(id) {
fetch(`/products/{id}`).then(product => {
// update state
});
}
render() {
return (
let { name, description } = this.props.app.product;
this.handleSelect(id)} />
);
}
}
໋ྩత
એݴత
{name}
{description}
Slide 21
Slide 21 text
RelayΛͬͨ߹
1. Πϕϯτ͕τϦΨʔ͞ΕΔ
2. ϦΫΤετΛͭ͘ΔͨΊͷΛߋ৽͢Δ
• ࣗಈͰϦΫΤετΛૹΔ
• ϨεϙϯεͷσʔλΛݩʹstateΛࣗಈͰߋ৽
• View͕ࣗಈతʹߋ৽͞ΕΔ
Slide 22
Slide 22 text
class AppComponent extends React.Component {
handleSelect(id) {
this.props.relay.setVariables({ id });
}
render() {
let { name, description } = this.props.app.product;
return (
// Reactͷྫͱಉ༷
);
}
}
const AppContainer = Relay.createContainer(AppComponent, {
initialVariables: { id: 1 },
fragments: {
app: () => Relay.QL`
fragment on App {
product(id: $id) {
name, description
}
}
`,
},
});
એݴత
Slide 23
Slide 23 text
COLOCATION
Slide 24
Slide 24 text
query BlogApp {
post {
title
body
author {
name
}
comments {
body
user {
name
}
}
}
}
Slide 25
Slide 25 text
Slide 26
Slide 26 text
query PostApp {
...post
}
fragment post on Post {
titlt
body
author { ...user }
comments { ...comment }
}
fragment comment on Comment {
body
user { ...user }
}
fragment user on User {
name
}
Slide 27
Slide 27 text
class PostComponent extends React.Component {
//...
}
export default Relay.createContainer(PostComponent, {
fragments: {
post: () => Relay.QL`
fragment on Post {
id, title, body
author {
${Author.getFragment('user')}
}
comments {
${Comment.getFragment('comment')}
}
}
`
}
});
Slide 28
Slide 28 text
• ίϯϙʔωϯτʹඞཁͳσʔλ͕Ұྎવ
• ΫΤϦΛׂͯ͠࠶ར༻Ͱ͖Δ
• ඞཁͳσʔλ͚͍͍ͩײ͡ʹϦΫΤετͯ͠
͘ΕΔ
Slide 29
Slide 29 text
Relay.QL
Slide 30
Slide 30 text
Relay.createContainer(PostComponent, {
fragments: {
post: () => Relay.QL`
fragment on Post {
id
title
body
author {
${Author.getFragment('user')}
}
comments {
${Comment.getFragment('comment')}
}
}
`
}
});
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
babelRelayPlugin.js
var getbabelRelayPlugin = require('babel-relay-plugin');
var schema = require('../data/schema.json');
module.exports = getbabelRelayPlugin(schema.data);
Slide 33
Slide 33 text
type Query {
post: Post
}
type Post {
id: ID!
title: String!
body: String
author: User
comments: [Comment]
}
type Comment {
text: String!
user: User
}
type User {
name: String!
}
Slide 34
Slide 34 text
• ίϯύΠϧ࣌ʹϦΫΤετͷܕνΣοΫ͕Δ
• αʔόʔଆͱͷσʔλͷෆ߹Λ࣮ߦલʹ͛Δ
Slide 35
Slide 35 text
RelayͷͭΒΈ
Slide 36
Slide 36 text
• GraphQL/Reactͷ͕ࣝલఏ
• babelΛͬͨϏϧυڥඞਢ
• React΄ͲγϯϓϧͰͳ͍
• ͪΐͬͱࢼ͚ͩ͢Ͱෑډߴ͍
• ݱ࣌ͰࢿྉࢀߟΞϓϦ͕ઈతʹগͳ͍
Slide 37
Slide 37 text
Relayͷظ
Slide 38
Slide 38 text
• ·͞ʹϑϧελοΫͳϑϨʔϜϫʔΫ
• ࣍ੈͷRailsʹͳΕΔՄೳੑ͕ඍϨଘɾɾʁ
Slide 39
Slide 39 text
fin.