React Apollo:添加新项目时更新列表缓存(带变量)

Question

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

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

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

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

Answer 1

这是一个已知的阿波罗问题，团队正在努力解决。您当前的选项可以在这篇中等帖子中找到。

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

这是Github上关于它的已打开问题的参考

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

mutation update功能：

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

机器人更新和重新获取查询函数应该有权访问variables变量

与

Medium 文章中的解决方案相比，好处是不会删除具有不同变量的给定查询 (GET_TASKS( 的缓存数据。

Answer 3

Apollo 现在提供了一个新指令，允许在查询缓存时忽略某些变量。在这里查看。我用它来忽略我更改的分页参数。