智能查询自定义变量名称是否可能？答案

【问题标题】：Is smart query custom variable name possible?智能查询自定义变量名称是否可能？
【发布时间】：2020-03-10 07:49:36
【问题描述】：

我在我的项目中使用Vue 和Apollo 来查询GraphQL 端点。一切都很好，但我想开始编写通用组件以简化和加快开发。

问题是，在大多数情况下，我使用Smart Query 系统。例如，我使用：

  apollo: {
    group: {
      query: GROUP_QUERY,
      variables () { return { id: this.groupId } },
      skip () { return this.groupId === undefined },
      result ({ data }) {
        this.form.name = data.group.name
      }
    }
  }

GROUP_QUERY 就是：

const GROUP_QUERY = gql`
  query groupQuery ($id: ID) {
    group (id: $id) {
      id
      name
      usersCount
      userIds {
        id
        username
      }
    }
  }
`

所以我的 apollo 智能查询中的 group 变量与查询本身 group (id: $id) 具有相同的名称。正是这种机制对于我试图实现的目标来说非常烦人。有没有办法避免这种默认机制？

例如，我希望能够提供一个通用名称，例如 record，对于可能返回多条记录的查询，它会是 records。

有了它，我就可以制作在record 或records 上运行的通用组件或mixin。

或者我是否必须将我的所有查询重命名为 record 和 records，如果稍后出现错误消息进行故障排除，这会很烦人？

或者也许还有其他方法可以实现这一点，而我没有考虑过？

提前致谢。

【问题讨论】：

标签： vue.js vue-apollo

【解决方案1】：

实际上，您可以使用update 选项as seen here in the Vue Apollo documentation 重命名Apollo 智能查询的变量。您的示例如下所示：

  apollo: {
    record: {
      query: GROUP_QUERY,
      variables () { return { id: this.groupId } },

      update: (data) => data.group,

      skip () { return this.groupId === undefined },
      result ({ data }) {
        this.form.name = data.group.name
      }
    }
  }

您应该注意到，Apollo 对象将在您的组件中创建一个record 变量，并且update 语句显示了从何处获取group 以供记录。

【讨论】：

是的，我终于想通了，但我忘记发布了。实际上，可以在查询上设置其他名称（别名）。在GROUP_QUERY 下必须指定此别名才能使用它。所以我查询的第三行是：record: group (id: $id)

【解决方案2】：

这样做：

const GROUP_QUERY = gql`
  query groupQuery ($id: ID) {
    record: group (id: $id) {
      id
      name
      usersCount
      userIds {
        id
        username
      }
    }
  }
`

如果GROUP_QUERY 在多个地方使用，则可以在record 名称下访问结果，因为它被定义为group 的别名。请参阅Aliases 的文档。

【讨论】：