我有一个共同点Header
和 Footer
显示它可能已经在中继存储和主要 PageComponent
中的数据需要来自“查询”的数据,但我不想向用户显示完整的加载屏幕,我想在中间显示页眉、页脚和加载屏幕或内容。
所以,如你所知,如果我将所有内容都包装在 QueryRenderer
中,我将有两个选择:查询正在“加载”或数据可用:
<QueryRenderer
{...usualProps}
render={({ error, props }) => {
<div className="app-wrapper">
{ props || error ? <PageComponent {...props} error={error} /> : <div>Loading...</div>}
</div>
}}
/>
假设我有一种方法可以手动从商店中检索数据(因为我们没有从商店中进行部分渲染之类的东西)并且我可以将该信息传递给公共(public) Header
和 Footer
在加载主查询时:
<QueryRenderer
{...usualProps}
render={({ error, props }) => {
<div className="app-wrapper">
<Header {...storeProps} {...props} />
{ props || error ? <PageComponent {...props} error={error} /> : <div>Loading...</div>}
<Footer {...storeProps} {...props} />
</div>
}}
/>
我发现既然我有环境,我可以做这样的事情来从商店获取信息:
const storeProps = relayEnvironment.getStore().lookup({
dataID: 'client:root',
node: query().fragment, // special query with only the information I need for the `Header`
variables: {}
});
但是我遇到了一些问题:
- QueryRenderer 在卸载时处理数据 :cry:(虽然我从中读取的信息也应该由 Query 检索,但从存储中读取更像是查询返回时的后备)
- 语法看起来很乱
- 我必须创建一个查询并编译它(无论如何我都可以忍受)
可能我以错误的方式解决了这个问题,也许有人做了类似的事情并且可以给我一些建议。
(如果没有任何效果,我的 B 计划是使用 getDerivedStateFromProp
将查询信息发送到自定义上下文并将其保存在那里以避免存储 GC 问题,例如)。
TL:DR:我想在查询完成加载时从存储中加载数据,然后使用查询返回的数据。
有什么想法吗?如果有什么不清楚的地方,请告诉我
最佳答案
使用 relayEnvironment
读取存储听起来不是一个好的解决方案。
如果为 Header
放置一个 QueryRenderer
,为 Footer
放置另一个,您会怎么想?所以每个人都会获取自己的数据,与页面内容分开。这有意义吗?
希望对您有所帮助:)
关于relayjs - 在加载查询时从中继存储加载数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53587381/