Slide 1
Slide 1 text
GraphcoolͱVue.jsͰͪΐͬͱ
ͨ͠αʔϏεΛ࡞ͬͯΈͨ
FUKUOKA Engineers Day 2018
Slide 2
Slide 2 text
Keigo Miyasue
• ͖ͭͶ͕͖
• 30ࡀ
• Ո۩ΠϯςϦΞϝʔΧʔͷΤϯδχΞ
• @foxtrackjp
Slide 3
Slide 3 text
GraphQLͱʁ
Slide 4
Slide 4 text
ಛ1
• FacebookͷΫΤϦݴޠ
• RESTͷؒͱ͍͏ΑΓɺSQLͷؒ
• GitHubͷAPIGraphQLΛ࠾༻
Slide 5
Slide 5 text
ಛ2
• ඞཁͳσʔλ͚ͩʹΞΫηεͰ͖Δ
Slide 6
Slide 6 text
ಛ3
• ୯ҰΤϯυϙΠϯτ
const httpLink = new HttpLink({
uri: 'http://localhost:60000/simple/v1/cjc4fa0b0000401526lki4orj',
})
Slide 7
Slide 7 text
GraphcoolͱVue.jsͰͪΐͬͱ
ͨ͠αʔϏεΛ࡞ͬͯΈͨ
Slide 8
Slide 8 text
GraphcoolͱVue.jsͰͪΐͬͱ
ͨ͠αʔϏεΛ࡞ͬͯΈͨ
Α͘Θ͔Βͳ͍ͷ
Slide 9
Slide 9 text
͜Μͳͷ࡞ͬͨʂ
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
ͬͨαʔϏε
vue-apollo
αʔόʔ
ΫϥΠΞϯτ
Graphcool
Slide 13
Slide 13 text
Graphcool
• ؆୯ʹGraphQLڥΛ࡞ͬͯ͘ΕΔ
type User @model {
id: ID! @isUnique
name: String!
createdAt: DateTime!
updatedAt: DateTime!
posts: [Post!]! @relation(name: "UserPosts")
}
type Post @model {
id: ID! @isUnique
type: String!
memo: String!
minutes: Int!
createdAt: DateTime!
updatedAt: DateTime!
owner: User! @relation(name: "UserPosts")
}
npm install -g graphcool
graphcool-framework init Fox
cd Fox
graphcool-framework deploy
Simple API: http://localhost:60000/simple/v1/cjc4fa0b0000401526lki4orj
Relay API: http://localhost:60000/relay/v1/cjc4fa0b0000401526lki4orj
Subscriptions API: ws://localhost:60000/subscriptions/v1/cjc4fa0b0000401526lki4orj
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
͔͜͜Βಥવͷϑϩϯτͷ
Slide 16
Slide 16 text
Vue.js + Vuex + vue-apollo
export const GET_USER = gql`
query{
User(id: "cjdg6asik018w0152p0m3t2r7") {
id
name
posts {
id
type
minutes
memo
}
}
}
`
created: function () {
this.$apollo.query({
query: GET_USER,
}).then(data => {
this.$store.commit('updateUser', data.data.User);
})
},
Slide 17
Slide 17 text
·ͱΊ
• GraphQLָͰ͍͍ͧ
• Graphcoolָʹڥߏஙͯ͘͠ΕΔͧ
• Vue.jsָ͍ͧ͠
• ͖ͭͶ͔Θ͍͍ͧ
• גࣜձࣾϕΨίʔϙϨʔγϣϯͰΤϯδχΞΛืू͠
͓ͯΓ·͢