代码之家 › 专栏 › 技术社区 › MitchEff

从商店同步读取?

react-apollo graphql reactjs

MitchEff · 技术社区 · 7 年前

所以我使用阿波罗作为我的应用程序的状态,到目前为止,我有点吃惊,没有相当于 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)
        })
    }
}

忽略这样一个事实:为这么简单的东西编写所有这些代码是非常困难的,难道只有一种方法可以访问存储数据而不必等待?

1 回复 | 直到 7 年前

Herku 7 年前

这个 graphql 高阶分量来自 反应阿波罗 connect 从雷多。它将执行以下操作:

当组件挂载时,它将尝试在Apollo缓存上执行查询。您可以将查询看作 DSL 不仅可以从服务器上选择数据,还可以从存储中选择数据!如果这起作用的话,组件中几乎立即充满了 data 不执行任何远程请求。如果数据在存储中不可用,它将触发远程请求以接收数据。这将设置 loading 属性到 true .

阿波罗高速缓存是一个标准化的商店,非常类似于你的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>;
});

没有选择器,没有发生非规范化。这是阿波罗客户做的!当缓存自动更新时,您将获得更新的数据,类似于Redux。
不 componentWillMount 已在存储中检查数据并触发请求操作。阿波罗将进行检查并触发查询。

如果你做以上任何一个,你可能是错误地使用阿波罗客户端。当您想优化查询时 start here .