Question

在应用程序中，视图A更新视图B上的数据。在视图B中，基于两个日期的范围查询数据。视图B占用的缓存未正确更新。

问题在于更新缓存将过于复杂，以至于无法处理视图A的变异。我不想使用fetchPolicy：no-cache，因为在视图B导航时一直查询总是感觉很不必要。我也不想重置整个缓存。

因此，我想在视图B上重新获取查询，但仅在进入组件时才可以。为此，我创建了一个函数，该函数从ROOT_OBJECT中查找正确的查询，并在呈现容器之前将其删除：

  static getDerivedStateFromProps(props) {
    if (props.client.cache.data.data.ROOT_QUERY) {
      let ROOT_QUERY = { ...props.client.cache.data.data.ROOT_QUERY };
      let ROOT_QUERY_keys = Object.keys(props.client.cache.data.data.ROOT_QUERY);
      ROOT_QUERY_keys.forEach((key) => {
        // Everything between quotes is a query params object
        const rgx = /\(([^]+)\)/.exec(key),
          param_str = rgx&&rgx[1];
        // Certain type of query, with params...
        if (key.includes('episodes')&&param_str) {
          const param_obj = JSON.parse(param_str);
          if (param_obj.after||param_obj.before) {
            delete ROOT_QUERY[key];
          }
        }
      });
      props.client.cache.data.data.ROOT_QUERY = ROOT_QUERY;
    }
    return null;
  }

这样做/达到预期效果的正确方法是什么？我在这里冒什么风险？

什么是从React Apollo中仅从缓存中删除一些查询的方法？

0 个答案: