Question

在我的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：...}上缺少MissingUser属性”

Answer 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
      };
    },
  })
}

Answer 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/Akryum/vue-apollo/blob/master/docs/api/smart-query.md#options

对多个vue属性重用apollo graphql查询定义

2 个答案: