使用 writeQuery() 更新 Apollo Client 上的缓存

Question

不是重复的 我一直在研究 documentations，并阅读了很多类似的问题，但我还没有找到回答我的问题。

问题： 我在 console.log() 中没有从 writeQuery 得到任何响应，并且缓存在突变完成后没有更新。我能够记录除 cache.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
                            ]
                        }
                    }
                }));
            }
        });

欢迎任何帮助，这是我第一次尝试更新缓存！

Answer 1

我解决了这个问题。我必须在 typePolicies 中为 ProductCategory 添加一个 keyField，因为它正在寻找这些对象没有的 'id'。

我还有一些像@apollo/react-hooks 这样的旧包，它们以某种方式干预了缓存。有关详细信息，请查找 updating help in de docs.

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

可以在其中一个 apollo 博客中找到关于缓存的更多信息： https://www.apollographql.com/blog/apollo-client/caching/demystifying-cache-normalization/

使用 writeQuery() 更新 Apollo Client 上的缓存

Updating cache on Apollo Client with writeQuery()

caching

react-hooks

updates

apollo-client