使用 writeQuery() 更新 Apollo 客户端上的缓存答案

【问题标题】：Updating cache on Apollo Client with writeQuery()使用 writeQuery() 更新 Apollo 客户端上的缓存
【发布时间】：2021-09-16 23:42:52
【问题描述】：

不是重复的 我一直在查看documentations，并阅读了很多关于类似问题的信息，但我没有找到答案。

问题：我没有从 console.log() 中的 writeQuery 得到任何响应，并且在突变完成后缓存没有更新。除了 cache.writeQuery() 的结果之外，我能够记录所有内容，但是我无法弄清楚。有人能指出我哪里出了问题以及如何解决吗？

我尝试做的事情： 从缓存中删除（通过突变）删除的对象，方法是用删除对象的新数据替换以前的数据。并保存更新的缓存！

productCategorie 查询：

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
            }
        }
    }
`

CACHE productcategories 查询：

$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"

deleteCategorie 突变：

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
                            ]
                        }
                    }
                }));
            }
        });

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

【问题讨论】：

您尝试过记录 newCats 吗？是否真的从列表中删除了已删除的类别？
@mfurkangok，感谢您的回复。我已经成功记录了 newCats 并且它具有预期的 9 个剩余对象。除了 cache.writeQuery() 的结果之外，我能够记录所有内容。

标签： caching react-hooks updates apollo-client

【解决方案1】：

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

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

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

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

【讨论】：