React Apollo：添加新项目时更新列表缓存（带变量）

Posted 2023-03-10

【中文标题】React Apollo：添加新项目时更新列表缓存（带变量）

【英文标题】：React Apollo: Update lists cache (with variables) when new item is added

【发布时间】：2019-06-28 13:39:33

【问题描述】：

我很难弄清楚如何更新项目列表（在缓存中）。当使用react-apollo 创建新项目时。

<CreateItemButton /> 组件（在我的情况下）没有嵌套在 <ListItems /> 组件中。据我所知，我需要通过我的 createItemButton <Mutation /> 组件中的更新函数来更新缓存。

问题是当我尝试store.readQuery(query: GET_LIST_ITEMS, variables: ???) 获取当前项目列表（以附加我最近创建的项目）时，它可以有变量/过滤器（用于分页、排序等）。

我如何知道要传递给store.readQuery 函数的变量，是否有一种“最后使用的变量”围绕此问题，或者您对如何解决此问题有任何其他建议？

【问题讨论】：

我建议添加代码 sn-ps 和示例。也许是一个演示/示例的链接，人们可以使用它来帮助回答您的问题。 (***.com/questions/21285923/…) 可能会有所帮助。但是在 SO 上询问时，示例和代码 sn-ps 是最佳实践。

【参考方案1】：

这是一个已知的 Apollo 问题，团队正在努力解决。您可以在in this medium post 找到当前的选项。

当您将项目放在带有过滤器或分页的列表中时，删除/更新项目也是一个问题。

这里是an opened issue on Github about it的参考

【参考方案2】：

这似乎可行，但访问cache.watches Set 有点麻烦？ :S

诀窍是访问给定查询的缓存变量，保存它并使用给定查询变量执行重新获取。就我而言，在创建项目后：

export const getGraphqlCacheVariables = (queryName, cache) => 
  if (cache.watches) 
    const watch = [...cache.watches].find(w => !!w.query[queryName]);

    if (watch) 
      return watch.variables;
    
  
;

mutationupdate 函数：

let variables;

const update = (cache,  data ) => 
  if (data && data.createTask && data.createTask.task) 
    variables = getGraphqlCacheVariables('GetTasks', cache);
  

还有refetchQueries 函数：

const refetchQueries = () => 
      if (variables && Object.keys(variables).length > 0) 
        return [ query: GET_TASKS, variables ];
      
      return [];

update 和 refetchQueries 函数应该可以访问 variables 变量

与Medium article 中的解决方案相比，优势在于您不会删除具有不同变量的给定查询 (GET_TASKS) 的缓存数据。

【参考方案3】：

Apollo 现在提供了一个新指令，允许在查询缓存时忽略某些变量。检查它here。我用它来忽略我不断变化的分页参数。