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响应应触发＆＃39; LOGGED_IN＆＃39; 操作调度用户数据，这将由 reducer 更新您的商店中的用户对象（尽可能多地嵌套），然后容器将连接到此用户在商店中使用 connect（）

获取所有数据

Answer 2

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

通过道具手动传递数据
使用相同的查询

手动传递确保您的组件正确重新呈现，但重构可能会很痛苦。包装嵌套组件只会触及缓存。是的，您可能需要重做加载逻辑，但这不是显示停止。

我的建议是手动传递浅嵌套组件的道具并重新包装深层嵌套组件。不幸的是，react-apollo没有提供一种方便的方法来访问嵌套组件的apollo-store，就像redux的connect容器一样。

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

2 个答案: