使用 vue-apollo

我将使用GraphQL的API来构建一个前端应用程序，用来获取数据。
可以使用的框架包括React和Vue.js等。
这次我将使用Vue.js（React将在下次使用）。

除了Vue.js，我們還會使用apollo-client（GraphQL客戶端庫）和vue-apollo來方便地使用apollo。

vue-apollo

在中文中有很少看到类似”hello world”的东西，
它以完整的全栈GraphQL进行介绍。

前提 tí)

假设在某个GraphQL服务器上存在用户API。

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

在安装了Vue的服务器上，首先要创建一个模板。

使用下面的命令创建模板。
将设置为使用路由器。

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应用将会启动。