是否可以智能查询自定义变量名？

Question

我正在使用 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，对于可能 return 多条记录的查询，它将是 records。

有了它，我将能够制作在 record 或 records.

上运行的通用组件或混入。

或者我是否需要将我所有的查询重命名为 record 和 records，这在以后使用错误消息进行故障排除时会很烦人？

或者也许有另一种方法可以实现，但我没有考虑过？

提前致谢。

Answer 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 以供记录。

Answer 2

通过这样做：

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

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

的文档

是否可以智能查询自定义变量名？

Is smart query custom variable name possible?

vue.js

vue-apollo