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

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

foxtrackjp
February 10, 2018

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

foxtrackjp

February 10, 2018
Tweet

More Decks by foxtrackjp

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. GraphQLͱ͸ʁ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. ͜Μͳͷ࡞ͬͨʂ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. ·ͱΊ
    • GraphQL͸ָͰ͍͍ͧ
    • Graphcool͸ָʹ؀ڥߏஙͯ͘͠ΕΔͧ
    • Vue.jsָ͍ͧ͠
    • ͖ͭͶ͔Θ͍͍ͧ
    • גࣜձࣾϕΨίʔϙϨʔγϣϯͰ͸ΤϯδχΞΛืू͠
    ͓ͯΓ·͢

    View full-size slide