Apollo客户端更新缓存变量：orderby名称不起作用

Question

我有一个新产品的变异。我用cache.writeQuery更新缓存，我想按名称订购产品。我的代码不起作用，新产品始终是最后一项（参见图片）。我可以看到错误。你可以帮帮我吗？怎么了？

组件新产品

import { gql, useMutation } from '@apollo/client'

const NEW_PRODUCT = gql`
mutation newProduct($input: ProductInput) {
  newProduct(input:$input) {
    id
    name
    stock
    price
    date_creation
  }
}`

const GET_PRODUCTS = gql`
  query getProducts{
  getProducts{
    id
    name
    stock
    price
  }
}`

const NouProducte = () => {

  const [newProduct] = useMutation(NEW_PRODUCT, {
    update(cache, { data: { newProduct } }) {
      const { getProducts } = cache.readQuery({ query: GET_PRODUCTS })
      cache.writeQuery({
        query: GET_PRODUCTS,
        data: {
          getProducts: [...getProducts, newProduct],
          variables: { orderBy: name }
        }
      })
    }
  })
}

Answer 1

我不确定是否可以通过apollo在本地缓存上订购。但是，这是我解决问题的方法：

  data: {
          getProducts: [...getProducts, newProduct]
        }

在这行代码中，您将添加所有原始产品，然后将新产品添加到要写入缓存的数组的末尾。

解决此问题的快速方法是在将数组写入高速缓存之前对数组进行排序。以下比较按对象名称属性对数组进行排序

  function compare(a, b) {
    // Use toUpperCase() to ignore character casing
    const productA = a.name.toUpperCase();
    const productB = b.name.toUpperCase();

    let comparison = 0;
    if (productA > productB) {
      comparison = 1;
    } else if (productA < productB) {
      comparison = -1;
    }
    return comparison;
  }

然后在数组上使用它进行排序。

  data: {
          getProducts: [...getProducts, newProduct].sort(compare)
        }

Answer 2

您为什么期望排序？

您正在使用低级别访问权限进行缓存，然后您负责提供与远程源期望的形状相同的数据。

在这种情况下，如果对源数据进行了排序，则必须传递要写入的排序数据。只需获取getProducts，将newProduct推入数组，对其进行排序，最后使用writeQuery中的排序数组即可。