node.js - Vue Apollo：如何通过 GraphQL 在 VueJS 前端显示 Mysql 数据

Question

我是 VueJS 和 NodeJS 开发的新开发人员。

我在前端部分使用 apollo-boost、graphql、vue-apollo，在后端部分使用 express-graphql、express、graphql、knex、MySQL。

运行后端部分后，我得到如下正确响应：输入参数

{
  users {
    id,
    name,
    email
  }
}

输出：

{
  "data": {
    "users": [
      {
        "id": "1",
        "name": "test",
        "email": "test@test.com"
      },
      {
        "id": "2",
        "name": "test2",
        "email": "test2@test.com"
      }
    ]
  }
}

所以我认为代码在服务器端是可以的。现在我想在 vuejs 中显示这些数据。我实现的代码如下：

<template lang="pug">
  div
    .home
      img(alt='Vue logo', src='../assets/logo.png')
    div(style="text-align: left; padding: 20px 60px")
      div getTodos: {{ users }}
      div(v-for="users in users")
        h4 {{ users.name }}
</template>

<script>
// @ is an alias to /src
import { gql } from 'apollo-boost';

export default {
  name: 'Home',
  components: {},
  apollo: {
    users: {
      query: gql`
        query {
          users {
            id
            name
            email
          }
        }
      `,
    },
  },
};
</script>

<style>
.w-100 {
  width: 100%;
}
</style>

我没有收到任何错误，但没有任何结果显示在前端部分。请让我知道做错了什么？