在整个应用程序中共享一个查询结果的正确方法

Question

假设在应用程序的顶部，在呈现其余应用程序之前，我们检索了有关该应用程序或用户的一些基本信息：

const getUser = gql`
  query getUser(id: Int!) {
    user(id: $id) {
      id
      name
    }
  }
`)

function App({ data }) {
  return (
    <div>
      {!data.loading && !data.error && (
        // the application
      )}
    </div>
  )
}

export default graphql(getUser, {
  options: (props) => ({ variables: { id: props.id }})
})(App)

现在，在应用程序中的任何位置，都可以安全地假定已经加载并存储了用户。 另一个深层嵌套的组件无需重做查询和加载逻辑即可检索用户数据的正确方法是什么？

Answer 1

这是Redux等基于商店的库的最基本用法。 这并不是指导此处所有步骤的目的，但是您正在寻找一个单一的事实来源，如下所述： http : //redux.js.org/docs/introduction/ThreePrinciples.html

总之：接收的getUser响应应触发“LOGGED_IN” 行动调度的用户数据，这将通过减速器在您的商店更新用户对象被获取（尽可能多的嵌套，只要你想），容器会然后连接到该用户在使用connect（）存储并获取其所有数据

Answer 2

截至目前，我不确定是否有适当的方法，但是这些是我认为合理的选择

1. 通过道具手动传递数据
2. 用相同的查询包装深层嵌套的组件

手动传递可确保正确地重新渲染组件，但是重构可能会很痛苦。 包装嵌套的组件只会击中缓存。 是的，您可能需要重做加载逻辑，但这不是放映机。

我的建议是手动传递浅嵌套组件的道具，然后重新包裹深嵌套的组件。 不幸的是，react-apollo不能像redux的connect容器一样提供一种方便的方式来访问嵌套组件的apollo存储。