如何从 apollo 缓存中获取更新的数据

Question

Apollo 客户端是否有类似 mapStateToProps (Redux) 之类的东西？

假设我有一个组件，查询后我知道缓存中有数据，所以我执行以下操作：

    class Container extends React.Component {
      ...
      ...
      render() {
        const notes = this.props.client.readFragment(NOTES_FRAGMENT)
        // notes has everything I need
        return (<Child notes={notes} />);
      }

    }
    export default WithApollo(Container);

但是，当我有一个兄弟组件调用突变并进行更新时，<Child /> 组件的道具永远不会得到更新。

class AnotherContainer extends React.Component {
   render() {
     return(
       <Mutation
          mutation={UPDATE_NOTE}
          update={(cache, {data: {updateNote}}) =? {
            const list = cache.readFragment({
              fragment: NOTES_FRAGMENT
            })
            // manipulate list
            cache.writeFragment({fragment:NOTES_FRAGMENT, data })
          }
        }
     )
   }
}

所以我的问题是，当我执行 writeFragment 时，如何更新 <Child /> 组件的道具？是否有类似 mapStateToProps 的东西可以将 notes 道具“连接”到缓存，所以每当它更新时，都会触发 React 生命周期？

Answer 1

react-apollo 提供了三种监听缓存变化的方法：1）Query component，2）graphql HOC，3）直接使用客户端调用watchQuery。在所有这三种情况下，您都提供了一些查询和任何适当的选项，然后您就获得了一种方法来最初获取该查询并监听它的更新。

这里的关键是 查询，而不是 片段 是读取缓存的预期工具。 readFragment 方法仅作为一次读取缓存的便捷方式（通常在突变后更改缓存的上下文中）并且不提供任何类型的响应性。

因此，最重要的是，将您的组件包装在 Query 组件或 graphql HOC 中，您将可以访问反映缓存中查询结果的道具，并且会在缓存更新时更新（相同connected 组件的方式）。

此时，您可能会想到几件事：

“但我不需要再次请求服务器！” 不用担心——默认情况下，Apollo 只会请求一次相同的查询，并将使用缓存进行所有后续调用。您可以通过为您的查询设置适当的fetch policy 来修改此行为。这包括一个cache-only 策略，它只会从缓存中提取数据（尽管默认的cache-first 策略对于大多数用例来说已经足够了）。

“但我没有要处理的查询！”如果您将写入缓存作为保持某些任意客户端状态的一种方式，那么您应该使用 @ 987654324@ 这样做。

“但我不需要整个查询结果，只需要其中的一部分！” graphql HOC 提供了一个 props 函数，您可以将其传递给配置您将查询数据转换为您想要使用的任何形状。当使用带有Query 组件的渲染道具模式时，实际上并不需要相同的功能——您可以直接操作渲染道具。在任何一种情况下，编写一些可以在整个项目中重复使用的 reducer 都是一个好主意，它们只需获取返回的数据并将其转换为您需要的形状。我参与的最后一个大型项目就是在客户端进行的，它使事情变得更易于管理。