vue cli で Github の graphql (API)を vue-apolloを使って叩く

f:id:jun9632:20180614113106p:plain

vueのインストール

vue init webpack my-project

何個か質問されるので、回答しながら進んでください。

インストール終わったら、

パッケージをインストールして、起動！

cd my-project
npm install
npm run dev

vue-apolloのインストール

vueからgraphqlを叩きやすくしてくれるモノです。

github.com

下記パッケージをインストールします。

npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

main.jsに設定を追加

こんな感じです。

import Vue from 'vue'
import App from './App'
import router from './router'

import {ApolloClient} from 'apollo-client'
import VueApollo from 'vue-apollo'
import { HttpLink } from 'apollo-link-http'
import {ApolloLink, concat} from 'apollo-link'
import { InMemoryCache } from 'apollo-cache-inmemory'

Vue.config.productionTip = false
Vue.use(VueApollo)

const AccessToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
const authMiddleware = new ApolloLink((operation, forward) => {
  operation.setContext({
    headers: {
      Authorization: `bearer ${AccessToken}`,
      Accept: 'application/vnd.github.v4.idl'
    }
  })
  return forward(operation)
})

const httpLink = new HttpLink({
  uri: 'https://api.github.com/graphql'
})

const apolloClient = new ApolloClient({
  link: concat(authMiddleware, httpLink),
  cache: new InMemoryCache()
})

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
  defaultOptions: {
    $loadingKey: 'loading'
  }
})

new Vue({
  el: '#app',
  provide: apolloProvider.provide(),
  router,
  components: { App },
  template: '<App/>'
})

headers の Authorizationに githubのAccessTokenを渡してあげています。

githubのAccessTokenは下記リンクよりの取得して自分のtokenに修正してください。

https://github.com/settings/tokens

compornetの書き方

適当に graphql.vueなどでお試しください。

<template>
  <p>
    {{viewer.login}}
  </p>
</template>

<script>
import gql from 'graphql-tag'

const ViewerQuery = gql`
  query {
    viewer {
      login
    }
  }
`

export default {
  name: 'index',
  data () {
    return {
      viewer: ''
    }
  },
  apollo: {
    viewer: {
      query: ViewerQuery,
      // update (data) {
      //  return data.viewer
      // }
    }
  }
}
</script>

<style scoped>

</style>

{{viewer.login}} に自分のgithubのアカウント名が表示されれば成功です。

下記はポイントや注意です

import gql from 'graphql-tag'

graphql-tagをインポートします。

graphqlのクエリーを書きやすくしてくれるもの

const ViewerQuery

const ViewerQuery に graphql-tagを使って、クエリーを書いています。

ハマったのが、

gql`

の

ングルクォーテーション【 ' 】じゃなくてバッククォーテーション【 ' 】です。

ご注意を！！

受け取り用の変数とapolloからの呼び出しを定義

dataにviewerを定義しています。

data () {
    return {
      viewer: ''
    }
  },
apollo: {
    viewer: { // <= セットする変数名
      query: ViewerQuery, // <= 呼び出すクエリー
    }
  }
}

今回、graphqlのクエリの戻りが、下記のようになります。

{
  "data": {
    "viewer": {
      "login": "xxxxxxx"
    }
  }
}

※ 変数名とレスポンスでdata配下の名前をviewerで統一しておくと、暗黙的にセットしてくれます。

ここもハマりポイントで、

下記のようにレスポンスの名前と変数名が異なると値がセットされません。

data () {
    return {
      hello: ''
    }
  }
apollo: {
    hello: { 
      query: ViewerQuery
    }
  }
}

↑ ダメな書き方です

しかし

変数名とレスポンスの名前が違う時やレスポンスの部分的に値をセットしたい時などは、 update (data) を使って特定の値をセットすることもできます。

data () {
    return {
      hello: ''
    }
  }
apollo: {
    hello: { 
      query: ViewerQuery,
      update (data) {
        return data.viewer
      }
    }
  }
}

data () {
    return {
      viewer: '',
      login: ''
    }
  }
apollo: {
    login: { 
      query: ViewerQuery,
      update (data) {
        return data.viewer.login
      }
    }
  }
}