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

Question

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

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

    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 />组件的 props 永远不会更新。

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

所以我的问题是，如何更新 <Child />每当我执行 writeFragment 时组件的 props ？有没有像mapStateToProps这样的东西来“连接”notes props 到缓存，所以每当它更新时，都会触发 React 生命周期？

Answer 1

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

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

因此，最重要的是，将您的组件包装在 Query 组件或 graphql HOC 中，您将可以访问反射(reflect)缓存中查询结果的 props当缓存更新时，它也会更新(与连接组件的方式相同)。

此时您的脑海中可能会想到一些事情:

“但我不需要发出另一个服务器请求!”不用担心 - 默认情况下，Apollo 只会请求相同的查询一次，并将在所有后续调用中使用缓存。您可以通过为查询设置适当的 fetch policy 来修改此行为。这包括仅从缓存中提取数据的仅缓存策略(尽管默认的缓存优先策略足以满足大多数用例)。

“但是我没有可以使用的查询!”如果您将写入缓存作为持久保留某些任意客户端状态的手段，那么您应该使用 apollo-link-state这样做。

“但是我不需要整个查询结果，只需要其中的一部分!” graphql HOC 提供了一个 props 函数您可以传入配置，让您将查询数据转换为您想要使用的任何形状。当将渲染 Prop 模式与Query组件一起使用时，实际上并不需要相同的功能——您可以直接操作渲染 Prop 。无论哪种情况，编写一些可以在整个项目中重复使用的化简器可能是一个好主意，这些化简器仅获取返回的数据并将其转换为您需要的形状。我参与的最后一个大型项目只做了客户端，它使事情变得更加易于管理。