从商店同步读取？

Question

所以我正在使用 Apollo 作为我应用程序的状态，到目前为止我有点吃惊，因为没有 mapStateToProps 等价物。

据我所知，要在我的商店中全局访问任何数据，一旦我获得数据，我需要一个查询将数据写入商店，然后在我的其他组件中进行另一个查询以获取它。

至此，另一个组件已完成大部分安装和渲染，因此内容只是有点闪烁进出。

在 Redux 中，我可以将新数据添加到我的 reducer 中的存储中，然后任何与 mapStateToProps 连接的东西都可以访问它。

有对应的吗？还是一切都需要通过异步查询？有没有其他人觉得这是一种巨大的痛苦？

例如，在一个组件中我得到了一些邀请数据：

   this.props.client.query({
        query: REQUEST_ACTION_DATA,
        variables: {
            id: actionData.id,
            type: actionData.type
        }
    }).then(data => {
        this.props.client.writeQuery({query: GET_ACTION_DATA, data: {
            action: {
                type: data.data.actionData.type,
                object: data.data.actionData.invitation,
                __typename: 'ActionDataPayload'
            }
        }})

        this.props.history.push('/auth/register')
    })

...然后在我的其他组件中我有这个：

componentWillMount() {
    const authToken = localStorage.getItem(AUTH_TOKEN);

    if (authToken) {
        this.props.history.push('/')
    }else{
        this.props.client.query({
            query: GET_ACTION_DATA
        }).then(data => {
            if(data.data && data.data.action && data.data.action.type == 'invite'){
                this.setState({
                    invitation: data.data.action.object
                })
            }
            console.log(data)
        })
    }
}

忽略为如此简单的事情编写所有这些内容非常笨拙的事实，是否有一种无需等待即可访问商店数据的方法？

Answer 1

来自 react-apollo 的 graphql 高阶组件是来自 redux 的增压 connect。它将执行以下操作：

当组件安装时，它将尝试在 Apollo 缓存上执行查询。您可以将查询视为 DSL，不仅可以从服务器还可以从商店中选择数据！如果这有效，该组件几乎会立即被商店中的 data 填充，并且不会执行任何远程请求。如果数据在商店中不可用，它会触发远程请求以接收数据。然后这会将 loading 属性设置为 true.

Apollo 缓存是一个规范化的存储，与您的 redux 存储非常相似。但是由于 GraphQL 的局限性经过深思熟虑，规范化可以自动发生，您不必为商店的结构而烦恼。这允许程序员完全忘记存储、选择器和请求（除非您正在大量优化代码的性能）。欢迎来到 GraphQL 前端框架的声明之美！您声明您想要的数据及其到达方式是完全透明的。

export default graphql(gql`{ helloWorld }`)(function HelloWorld({ data }) {
  if (data.loading) {
    return <div>Loading the simple query, please stand by</div>;
  }
  return <div>Result is: {data.helloWorld}</div>;
});

没有选择器，没有发生反规范化。这是由 Apollo Client 完成的！当缓存自动更新时，您将获得更新的数据，类似于 Redux。
否 componentWillMount 检查数据是否已存储并触发请求操作。 Apollo 将进行检查并触发查询。
没有对响应数据进行规范化（也由 Apollo Client 为您完成）

如果您执行以上任何一项操作，则您可能错误地使用了 Apollo Client。当您想优化查询时 start here.

从商店同步读取？

Synchronously read from the store?

reactjs

graphql

react-apollo