GraphQLの旅(6) GraphQLを読み込む最小Vue.jsフロントエンド

vue-apolloを使う

GraphQLのAPIを使用しデータを取得するフロントエンドアプリを作ります。
使用できるフレームワークは、ReactやVue.jsなどがあります。
今回はVue.jsを利用します。（Reactは次回とします）

Vue.jsに加えて、apollo-client（GraphQLクライアントライブラリ）、そしてvueからapolloを使いやすくするvue-apolloを使います。

• vue-apollo

なかなかhello world的なものが見当たらないのですが、
fullstack GraphQLで紹介してくれています。

前提

とあるGraphQLサーバにてUserのAPIがあるとします。

type User {
  id: ID! @unique
  name: String!
}

Vueがインストールされたサーバでまずはひな型を作る

下記コマンドでひな型を作ります。
routerを使用する設定にします。

vue init webpack <アプリ名>

vue-apolloなどライブラリを追加

yarn add vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-link-context apollo-cache-inmemory graphql-tag vue-moment

Vueのコンポーネントを追加

• components/User.vueを追加

<template>
  <div>
    <h1>vue-apollo example: users</h1>
    <div v-for="user in users" :key="user.id">
        <div>{{ user.id }}, {{ user.name }}</div>
    </div>
</template>

<script>
import gql from 'graphql-tag'

const FeedQuery = gql`
{
  users {
    ...namename
  }
}
fragment namename on User {
  name
  id
}
`
export default {
  data: () => ({
    users: [{name: 'test'}]
  }),
  apollo: {
    users: {
      query: FeedQuery,
      loadingKey: 'loading'
    }
  }
}
</script>

• router/index.jsに/user/ルートを追加

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import User from '@/components/User'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/user/',
      name: 'User',
      component: User
    }
  ]
})

• 最後にmain.jsにGraphQLサーバへの接続を書く

import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
import App from './App'
import router from './router'

Vue.config.productionTip = false

// install the vue-momnet plugin
Vue.use(require('vue-moment'))
Vue.use(VueApollo)

const apolloProvider = new VueApollo({
  defaultClient: new ApolloClient({
    link: new HttpLink({ uri: 'http://＜GraphQLサーバ＞' }),
    cache: new InMemoryCache()
  })
})

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

ファイル構成はこうなります。★を追加・更新しました。

.
├── build
├── config
├── index.html
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   ├── HelloWorld.vue
│   │   └── User.vue　★
│   ├── main.js　★　（更新のみ）
│   └── router
│       └── index.js　★（更新のみ）
├── static
├── test
└── yarn.lock

起動

yarn dev

これで、http://localhost:8080/#/user/にアクセスするとVueアプリが起動します。