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中，您将可以访问反映缓存中查询结果的道具，并在缓存时更新更新（与connect ed组件相同的方式。）

此时可能会发生一些事情：

＆＃34;但我不需要提出另一个服务器请求！＆＃34; 无后顾之忧 - 默认情况下，Apollo只会请求相同的查询一次，并且将缓存用于所有后续调用。您可以通过为查询设置适当的fetch policy来修改此行为。这包括cache-only策略，该策略仅从缓存中提取数据（尽管默认的cache-first策略足以满足大多数用例）。

＆＃34;但我没有查询可以使用！＆＃34; 如果您正在写入缓存作为持久保留某些客户端的方法那边你应该使用apollo-link-state这样做。

＆＃34;但我不需要整个查询结果，只是其中的一部分！＆＃34; graphql HOC提供了{{1}您可以将函数传递给可以将查询数据转换为您想要使用的任何形状的配置。将渲染道具模式与props组件一起使用时，实际上并不需要相同的功能 - 您可以直接操作渲染道具。在任何一种情况下，编写一些可以在整个项目中重用的减速器可能是一个好主意，只需获取返回的数据并将其转换为您需要的形状。我工作的最后一个大项目就是客户端，它让事情变得更易于管理。

如何从apollo缓存

1 个答案: