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

IT技术 reactjs redux graphql apollo react-apollo
2021-04-30 16:59:32

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 />组件的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 这样的东西将notesprops“连接”到缓存,所以每当它更新时,都会触发 React 生命周期?

1个回答

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

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

因此,最重要的是,将您的组件包装在Query组件或graphqlHOC 中,您将可以访问在缓存中反映查询结果的 props,并且会在缓存更新时更新(与connected components相同)。

在这一点上,您可能会想到一些事情:

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

“但我没有要处理的查询!” 如果您将写入缓存作为保留某些任意客户端状态的一种方式,那么您应该使用apollo-link-state来执行此操作。

“但我不需要整个查询结果,只需要其中的一部分!” graphqlHOC提供了一个props你可以到让你改变你的查询数据到要与工作的任何形状的配置通功能。将渲染props模式与Query组件一起使用时,实际上并不需要相同的功能——您可以直接操作渲染props。在任何一种情况下,编写一些可以在整个项目中重复使用的 reducer 都是一个好主意,这些reducer 只需获取返回的数据并将其转换为您需要的形状。我参与的最后一个大项目就是在客户端进行的,它使事情更易于管理。