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

【问题标题】：Apollo-client update cache variable: orderby name doesn't workApollo 客户端更新缓存变量：orderby 名称不起作用
【发布时间】：2020-09-16 03:42:02
【问题描述】：

我有一个新产品的突变。我用 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 }
        }
      })
    }
  })
}

【问题讨论】：

标签： reactjs graphql apollo-client

【解决方案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)
        }

【讨论】：

缓存上没有任何神奇的功能。它只是一个可以操作的数据存储。这是解决问题的正确方法。

【解决方案2】：

您为什么期望排序？

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

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

【讨论】：