Question

因此，我正在将Apollo用于我的应用程序状态，到目前为止，我感到有些吃惊，那里没有mapStateToProps之类的东西。

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

至此，其他组件已经安装和渲染完毕，因此内容只是进出闪烁。

在Redux中，我可以将新数据添加到我的reducers中的存储中，然后与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 Client为您完成）

如果执行上述任何操作，则可能是错误地使用了Apollo Client。当您要优化查询start here时。

从商店同步读取？

1 个答案: