对于数组结果,optimisticResponse 是啥样的?

Posted

技术标签:

【中文标题】对于数组结果,optimisticResponse 是啥样的?【英文标题】:What does the optimisticResponse look like for an array result?对于数组结果,optimisticResponse 是什么样的? 【发布时间】:2017-03-29 16:42:02 【问题描述】:

这是一个列表,其中项目可以重新排序,其中变异输入是重新排序的数组,变异结果是保存到数据库后按新顺序排列的照片列表。实际的突变效果很好,但我不知道数组的 optimisticResponse 应该是什么样子,因为它似乎没有发生。


input InputItemOrder 
  key: String
  order: Int
  ref: InputPhoto


input InputPhoto 
  public_id: String
  secure_url: String


type Mutation 
  orderMyPhotos(itemOrder: [InputItemOrder]): [Photo]


type Photo 
  public_id: String
  secure_url: String
  order: Int


const ORDER_MY_PHOTOS_MUTATION = gql`
mutation OrderMyPhotos($itemOrder: [InputItemOrder]) 
  orderMyPhotos(itemOrder: $itemOrder) 
    public_id
    secure_url
    order
  

`;

  graphql(ORDER_MY_PHOTOS_MUTATION, 
    props: ( ownProps, mutate ) => (
      order: (itemOrder) => mutate(
        variables:  itemOrder ,
        optimisticResponse: 
          __typename: 'Mutation',
          orderMyPhotos: itemOrder.map(i => (
            __typename: 'Photo',
            public_id: i.ref.public_id,
            secure_url: i.ref.secure_url,
            order: i.order,
          )),
        ,
        updateQueries: 
          MyPhotos: (prev,  mutationResult ) => 
            const orderedPhotos = mutationResult.data.orderMyPhotos;
            return update(prev, 
              userPhotos: 
                $set: orderedPhotos,
              ,
            );
          ,
        ,
      ),
    ),
  ),

【问题讨论】:

乐观的更新应该看起来和真实的结果一模一样。所以你是说真正的突变结果很好,但不是乐观的版本? 【参考方案1】:

感谢@stubailo:

乐观的更新应该和真实的结果一模一样。

事实证明,我在服务器上执行了未应用于乐观更新的附加逻辑。当我这样做时,它起作用了:

  graphql(ORDER_MY_PHOTOS_MUTATION, 
    props: ( ownProps, mutate ) => (
      order: (itemOrder) => mutate(
        variables:  itemOrder ,
          optimisticResponse: 
            __typename: 'Mutation',
            orderMyPhotos: _.sortBy(itemOrder.filter(i => _.isNumber(i.order)).map(j => (
              __typename: 'Photo',
              order: j.order,
              public_id: j.ref.public_id,
              secure_url: j.ref.secure_url,
            )), 'order')
          ,
        updateQueries: 
          MyPhotos: (prev,  mutationResult ) => 
            return update(prev, 
              userPhotos: 
                $set: mutationResult.data.orderMyPhotos,
              ,
            );
          ,
        ,
      ),
    ),
  ),

【讨论】:

以上是关于对于数组结果,optimisticResponse 是啥样的?的主要内容,如果未能解决你的问题,请参考以下文章

具有 OptimisticResponse 的突变不包括第二次更新中的服务器响应数据

Apollo 客户端乐观响应如何工作

Apollo 客户端中的乐观响应与更新?

Js对于数组去重提高效率一些心得

libdbus 读取数组类型结果

用于递归展平结果的 JS 数组串联