GraphcoolとVue.jsでちょっとしたサービスを作ってみた話

Transcript

1. 1.

   GraphcoolͱVue.jsͰͪΐͬͱ ͨ͠αʔϏεΛ࡞ͬͯΈͨ࿩ FUKUOKA Engineers Day 2018

2. 2.

   Keigo Miyasue • ͖ͭͶ͕޷͖ • 30ࡀ • Ո۩԰ΠϯςϦΞϝʔΧʔͷΤϯδχΞ • @foxtrackjp

3. 3.

   GraphQLͱ͸ʁ

4. 4.

   ಛ௃1 • Facebook੡ͷΫΤϦݴޠ • RESTͷ஥ؒͱ͍͏ΑΓ͸ɺSQLͷ஥ؒ • GitHubͷAPI΋GraphQLΛ࠾༻

5. 5.

   ಛ௃2 • ඞཁͳσʔλ͚ͩʹΞΫηεͰ͖Δ

6. 6.

   ಛ௃3 • ୯ҰΤϯυϙΠϯτ const httpLink = new HttpLink({ uri: 'http://localhost:60000/simple/v1/cjc4fa0b0000401526lki4orj',

   })
7. 7.

   GraphcoolͱVue.jsͰͪΐͬͱ ͨ͠αʔϏεΛ࡞ͬͯΈͨ࿩

8. 8.

   GraphcoolͱVue.jsͰͪΐͬͱ ͨ͠αʔϏεΛ࡞ͬͯΈͨ࿩ Α͘Θ͔Βͳ͍΋ͷ

9. 9.

   ͜Μͳͷ࡞ͬͨʂ

10. 10.

    None
11. 11.

    None
12. 12.

    ࢖ͬͨαʔϏε vue-apollo αʔόʔ ΫϥΠΞϯτ Graphcool

13. 13.

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

    None
15. 15.

    ͔͜͜Βಥવͷϑϩϯτͷ࿩

16. 16.

    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); }) },
17. 17.

    ·ͱΊ • GraphQL͸ָͰ͍͍ͧ • Graphcool͸ָʹ؀ڥߏஙͯ͘͠ΕΔͧ • Vue.jsָ͍ͧ͠ • ͖ͭͶ͔Θ͍͍ͧ •

    גࣜձࣾϕΨίʔϙϨʔγϣϯͰ͸ΤϯδχΞΛืू͠ ͓ͯΓ·͢