Urql缓存无效没有从缓存中删除项。

Question

我的应用程序有一个组织列表，我的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",

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