ECのウェブ担当者のメモ

ECサイトを運営管理している、WEB担当プログラマのメモ

スポンサーリンク

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
      }
    }
  }
}

参考サイト

ありがとうございます

GitHub - Akryum/vue-apollo: 🚀 Apollo/GraphQL integration for VueJS

GitHub - apollographql/graphql-tag: A JavaScript template literal tag that parses GraphQL queries

Introduction to GraphQL | GitHub Developer Guide

GraphQL API Explorer | GitHub Developer Guide

新卒エンジニアがVue+GraphQL+ServerlessでTodoアプリ作ってみた

express-graphql + vue-apollo で GraphQLを試してみた | PLAID engineer blog

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js