如何从阿波罗缓存中获取更新的数据

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

但是，当我有一个名为mutation并进行更新的同级组件时，该<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 })
          }
        }
     )
   }
}

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

Answer 1

react-apollo提供了三种方法来侦听缓存中的更改：1）查询组件，2）graphql HOC，以及3）watchQuery直接使用客户端进行调用。在这三种情况下，您都提供了一些查询和任何适当的选项，并且您有一种方法来初始获取该查询以及侦听该查询的更新。

这里的关键是查询（而不是片段）是读取缓存的目标工具。该readFragment方法仅是一种方便的方式来读取一次缓存（通常在突变后更改缓存的情况下），并且不提供任何形式的反应性。

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

在这一点上，可能有几件事正在发生：

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

“但是我没有查询可使用！” 如果您要写入高速缓存以保留某些任意客户端状态，则应该使用apollo-link-state进行操作。

“但是我不需要整个查询结果，只是一部分！” 该graphqlHOC提供了一个props你可以到让你改变你的查询数据到要与工作的任何形状的配置通功能。在Query组件上使用渲染道具模式时，实际上并不需要相同的功能-您可以直接操作渲染道具。无论哪种情况，最好编写一些化简器，以便您可以在整个项目中重复使用这些化简器，这些化简器只获取返回的数据并将其转换为所需的形状。我从事的最后一个大型项目就是在客户端进行的，它使事情变得更易于管理。