Блог

не дубликат Я просматривал документацию и много читал о подобных проблемах, но я не нашел ответа на свой.

Проблема: я НЕ получаю никакого ответа от writeQuery в console.log(), и кэш НЕ обновляется после завершения мутации. Я смог зарегистрировать все, кроме результатов кэширования.writeQuery(), однако я не могу этого понять. Может ли кто-нибудь указать мне, где я иду не так и как это исправить?

Что я пытаюсь сделать: удалите (путем мутации) удаленный объект из кэша, заменив предыдущие данные новыми данными, из которых удаляется объект. И сохраните обновленный кэш!

Запрос категории товаров:

 const GET_CATEGORIES_AND_PRODUCTS = gql`
    query GetProductcategories($site_id: ID!, $first: Int!, $page: Int!, $orderBy: [OrderByClause!]){
        productcategories(site_id: $site_id, first: $first, page: $page, orderBy: $orderBy ){
            paginatorInfo{
                count
                total
            }
            data {
            name
            categorie_id
            }
        }
    }
`
 

Запрос категорий продуктов КЭША:

 $ROOT_QUERY.productcategories({"first":10,"orderBy":[{"field":"categorie_id","order":"DESC"}],"page":1,"site_id":"152"})
paginatorInfo: {} 4 keys
data: { 10 keys
  0: {} 4 keys
     type:"id"
     generated:true
     id:"$ROOT_QUERY.productcategories({"first":10,"orderBy": 
[{"field":"categorie_id","order":"DESC"}],"page":1,"site_id":"152"}).data.0"
     typename:"ProductCategory"
  1: {} 4 keys
  2: {} 4 keys
  3: {} 4 keys
  4: {} 4 keys
  5: {} 4 keys
  6: {} 4 keys
  7: {} 4 keys
  8: {} 4 keys
  9: {} 4 keys
__typename:"ProductCategoryPaginator"
 

Мутация категории удаления:

 const [deleteCategorie, { loading, error }] = useMutation(DELETE_CATEGORIE, {
            update: (cache, deleteCategorie) => {
                const idToRemove = deleteCategorie.data.deleteCategorie.categorie_id;
                const existingData = cache.readQuery({ 
                    query: GET_CATEGORIES_AND_PRODUCTS, 
                    variables: { 
                        site_id: localStorage.getItem("site_id"),
                        page: (page   1),
                        first: rowsPerPage,
                        orderBy: [order],
                  }, });
                const deletedObject = existingData.productcategories.data.find((t) => (t.categorie_id === idToRemove));
                const newCats = existingData.productcategories.data.filter((t) => (t.categorie_id !== idToRemove));
                console.log(cache.writeQuery({
                    query: GET_CATEGORIES_AND_PRODUCTS,
                    variables: { 
                        site_id: localStorage.getItem("site_id"),
                        page: (page   1),
                        first: rowsPerPage,
                        orderBy: [order],
                    },
                    data: {
                        productcategories: {
                            data: [
                                ...newCats
                            ]
                        }
                    }
                }));
            }
        });
 

Любая помощь приветствуется, это первый раз, когда я пытаюсь обновить кэш!

Я исправил эту проблему. Мне пришлось добавить ключевое поле для ProductCategory в typePolicies, потому что оно искало «идентификатор», которого нет у этих объектов.

Также у меня было несколько старых пакетов, таких как @apollo/react-хуки, которые каким-то образом вмешивались в кэширование. Для получения дополнительной информации обратитесь за справкой по обновлению в de docs.

 cache: new InMemoryCache({
        typePolicies: {
            ProductCategory: {
                keyFields: ['categorie_id']
            },
        },
   })
 

Более подробную информацию об этом и о кэшировании можно найти в одном из блогов apollo:
https://www.apollographql.com/блог/apollo-клиент/кэширование/демистификация-нормализация кэша/