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

Cca7793ba382997ff3b30d1ac57c667e?s=47 foxtrackjp
February 10, 2018

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

Cca7793ba382997ff3b30d1ac57c667e?s=128

foxtrackjp

February 10, 2018
Tweet

Transcript

  1. 10.
  2. 11.
  3. 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
  4. 14.
  5. 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); }) },