Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
Avatar for foxtrackjp foxtrackjp
February 10, 2018

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

Avatar for foxtrackjp

foxtrackjp

February 10, 2018
Tweet

More Decks by foxtrackjp

Other Decks in Technology

Transcript

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