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

Posted 2023-03-08

【中文标题】为多个 vue 属性重用 apollo graphql 查询定义

【英文标题】：Reuse an apollo graphql query definition for multiple vue properties

【发布时间】：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 属性”

【参考方案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

【讨论】：

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