为多个 vue 属性重用 apollo graphql 查询定义答案

【问题标题】：Reuse an apollo graphql query definition for multiple vue properties为多个 vue 属性重用 apollo graphql 查询定义
【发布时间】：2019-10-10 18:10:10
【问题描述】：

在我的 vue 屏幕中，我想使用我为两个属性定义的一个 apollo graphql。据我了解，属性名称必须与返回的 json 结构中的属性名称匹配。我天真地尝试对两个属性使用查询，但它对第二个属性抛出错误。

  ...
  data() {
    return {
      userId: number,
      user: null as User | null,
      previousUserId: number,
      previousUser: null as User | null
    };
  },
  ...
  apollo {
    user: {
      query: READ_ONE_USER,
      variables() {
        return {
          userId: this.userId
        };
      }
    },
    previousUser: {
      query: READ_ONE_USER,
      variables() {
        return {
          userId: this.previousUserId
        };
      },

export const READ_ONE_USER = gql(`
query user($userId: Int!) { user(userId: $userId)
  {
    id
    firstName
    lastName
    email
  }
}
`);

我预计没有问题，但我得到“结果 {user: ...} 上缺少 previousUser 属性”

【问题讨论】：

标签： vue.js graphql apollo

【解决方案1】：

如文档中所示，您可以在 created 挂钩内手动添加智能查询：

created () {
  this.$apollo.addSmartQuery('user', {
    query: READ_ONE_USER,
    variables() {
      return {
        userId: this.userId
      };
    },
  })
  this.$apollo.addSmartQuery('previousUser', {
    query: READ_ONE_USER,
    variables() {
      return {
        userId: this.previousUserId
      };
    },
  })
}

【讨论】：

【解决方案2】：

Daniel 的解决方案对我不起作用，我仍然收到相同的错误消息。

但是还有另外一种方法，你可以提供一个update函数来告诉apollo如何从从服务器读取的数据中提取结果：

  apollo {
    user: {
      query: READ_ONE_USER,
      variables() {
        return {
          userId: this.userId
        };
      }
    },
    previousUser: {
      query: READ_ONE_USER,
      variables() {
        return {
          userId: this.previousUserId
        };
      },
      update(data) {
        return data.user;
      }
    }

这记录在https://github.com/vuejs/vue-apollo/blob/v4/packages/docs/src/api/smart-query.md#options

【讨论】：

这应该是公认的答案。可以确认这是有效的。