Urql 缓存无效未从缓存中删除项目答案

【问题标题】：Urql cache invalidate is not removing items from the cacheUrql 缓存无效未从缓存中删除项目
【发布时间】：2023-01-09 06:01:49
【问题描述】：

我的应用程序有一个组织列表，我的 UI 中有用于单独删除它们的按钮。

我希望列表更新并删除已删除的组织，但这对我不起作用。

我已经设置了这样的缓存交换，在这里我（冗余地）尝试了 Urql 文档中的两种缓存失效方法：

const cache = cacheExchange({
    updates: {
        Mutation: {
            delOrg(_result, args, cache, _info) {

                // Invalidate cache based on type
                cache.invalidate({ __typename: 'Org', id: args.id as number });

                // Invalidate all fields
                const key = 'Query';
                cache
                    .inspectFields(key)
                    .filter((field) => field.fieldName === 'allOrgs')
                    .forEach((field) => {
                        cache.invalidate(key, field.fieldKey);
                    });
            }
        }
    }
});

返回组织列表的 GraphQL 查询如下所示：

query AllOrgs {
    allOrgs {
        id
        name
        logo {
            id
            url
        }
    }
}

删除组织的突变看起来像：（它返回一个布尔值）

mutation DelOrg($id: ID!) {
    delOrg(id: $id)
}

cache.invalidate 似乎什么也没做。我已经使用调试插件以及console.log检查了缓存。我可以看到缓存中的记录，它们不会被删除。

我在用

"@urql/exchange-graphcache": "^4.4.1",
"@urql/svelte": "^1.3.3",

【问题讨论】：

标签： graphql svelte urql

【解决方案1】：

我找到了解决我的问题的方法。我现在使用 cache.updateQuery 来更新 data 而不是一行，我现在有 -

updates: {
        Mutation: {
            delOrg(_result, args, cache, _info) {
                if (_result.delOrg) {
                    cache.updateQuery(
                        {
                            query: QUERY_ALL_ORGS
                        },

                        (data) => {
                            data = {
                                ...data,
                                allOrgs: data.allOrgs.filter((n) => n.id !== args.id)
                            };
                            return data;
                        }
                    );
                }
            }
        }
    }

【讨论】：

从那以后你找到了另一个解决方案吗？
只是这里列出的解决方法

【解决方案2】：

如果只是关于缓存失效，你可以使用下面的invalidateCache函数：

const cacheConfig: GraphCacheConfig = {
    schema,
    updates: {
      Mutation: {
        // create
        createContact: (_parent, _args, cache, _info) =>
          invalidateCache(cache, 'allContacts'),

        // delete
        deleteContactById: (_parent, args, cache, _info) =>
          invalidateCache(cache, 'Contact', args),
      },
    },
  }

const invalidateCache = (
  cache: Cache,
  name: string,
  args?: { input: { id: any } }
) =>
  args
    ? cache.invalidate({ __typename: name, id: args.input.id })
    : cache
        .inspectFields('Query')
        .filter((field) => field.fieldName === name)
        .forEach((field) => {
          cache.invalidate('Query', field.fieldKey)
        })

对于创建突变 - 没有参数 - 该函数检查根 Query 并使所有具有匹配字段名称的字段键无效。

对于删除突变，该函数使必须作为突变参数给出的键无效。

【讨论】：