Переменная кеша обновлений Apollo-client: порядок по имени не работает - PullRequest
Новая
       105

Переменная кеша обновлений Apollo-client: порядок по имени не работает

0 голосов
/ 28 мая 2020

У меня мутация нового продукта. Я обновляю кеш с помощью 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 }
        }
      })
    }
  })
}

enter image description here

Ответы [ 2 ]

1 голос
/ 28 мая 2020

Я не уверен, можно ли заказать в локальном кеше с помощью 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)
        }
0 голосов
/ 28 мая 2020

Почему вы вообще ожидали сортировки?

Вы используете низкоуровневый доступ для кеширования, тогда вы несете ответственность за предоставление данных в та же форма , что и ожидалось от удаленного источника.

В этом случае , если исходные данные были отсортированы, вы должны передать отсортированные данные для записи . Просто введите getProducts, pu sh newProduct в массив, отсортируйте его и, наконец, используйте отсортированный массив в writeQuery.

...