首页 文章

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

提问于
浏览 次
3

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的事情"connect" notes 道具到缓存，所以每当它更新时，都会触发React生命周期？

reactjs redux graphql apollo react-apollo

1 回答

  • 2

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

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

    因此，在底线中，将组件包装在 Query 组件或 graphql HOC中，您将可以访问反映缓存中查询结果的道具，并在缓存更新时更新（与 connect ed组件相同） .

    在这一点上，你可能会想到几件事：

    "But I don't need to make another server request!" 无后顾之忧 - 默认情况下，Apollo只会请求一次相同的查询，并将使用缓存进行所有后续调用 . 您可以通过为查询设置适当的_1189427来修改此行为 . 这包括仅从缓存中提取数据的 cache-only 策略（尽管默认 cache-first 策略足以满足大多数用例） .

    "But I don't have a query to work with!" 如果您正在写缓存作为持久保存某些任意客户端状态的方法，那么您应该使用apollo-link-state来执行此操作 .

    "But I don't need the entire query result, just a part of it!" graphql HOC提供了一个 props 函数，您可以将其传递给配置，以便将查询数据转换为您想要使用的任何形状 . 将渲染道具模式与 Query 组件一起使用时，实际上并不需要相同的功能 - 您可以直接操作渲染道具 . 在任何一种情况下，编写一些可以在整个项目中重用的减速器可能是一个好主意，只需获取返回的数据并将其转换为您需要的形状 . 我工作的最后一个大项目只是客户端，它使事情更易于管理 .

    回复于

相关问题