我有一个公用的Header
和Footer
,它们显示可能已经在中继存储中的数据,而主PageComponent
则希望从“查询”中获取数据,但是我没有不想向用户显示完整的加载屏幕,我想在中间显示页眉,页脚和加载屏幕或内容。
因此,如您所知,如果我将所有内容都包裹在QueryRenderer
中,那么我将有两个选择:查询正在“加载”或数据可用:
<QueryRenderer
{...usualProps}
render={({ error, props }) => {
<div className="app-wrapper">
{ props || error ? <PageComponent {...props} error={error} /> : <div>Loading...</div>}
</div>
}}
/>
假设我有一种方法可以手动从商店中检索数据(因为我们没有像从商店中进行部分渲染那样的东西),并且可以将该信息传递给常见的Header
和{{1} },而主要查询正在加载:
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>
}}
/>
但是我有一些问题:
我可能是用错误的方式来解决问题,也许有人做了类似的事情,可能会给我一些建议。
(以防万一,我的计划B不能使用const storeProps = relayEnvironment.getStore().lookup({
dataID: 'client:root',
node: query().fragment, // special query with only the information I need for the `Header`
variables: {}
});
来将查询信息发送到自定义上下文,并将其保存在该上下文中,例如,以避免存储GC问题。)
TL:DR:我想在查询完成加载后从商店加载数据,然后使用从查询返回的数据。
有什么想法吗?让我知道是否不清楚
答案 0 :(得分:1)
用relayEnvironment
读取商店听起来不是一个好的解决方案。
如果您在QueryRenderer
上放置Header
,在Footer
上放置另一个,您会怎么想?因此,每个人都将获取其自己的数据,与页面内容分开。这有道理吗?
希望它会有所帮助:)
答案 1 :(得分:0)
中继具有可结合使用的Observables和Cache来实现此目的。
您可以从“中继运行时”导入{QueryResponseCache};
然后按以下方式使用它:
const cache = new QueryResponseCache({
size: CACHE_SIZE, // Number of responses to cache
ttl: CACHE_DURATION, // duration in ms to keep the cache
})
现在,当您从服务器获得响应时,可以像
一样存储它cache.set(queryId, variables, payload)
读起来像:
cache.get(queryId, variables)
现在可观察到的,从“继电器运行时”导入{Observable};
然后在网络中使用它,如下所示:
const fetchQuery = (operation, variables) => {
return Observable.create(observer => {
if (operation.operationKind !== 'mutation') {
observer.next(cachedData) // cacheData fetched from cache
}
const jsonResponse = fetch(...);
observer.next(jsonResponse);
observer.complete();
});
};
现在,如果方案是您要重用另一个查询中的数据,则高速缓存的情况可能不适用于您。但是,如果能够从存储中获取数据,则应该能够使用Observable传递数据,然后再从服务器获取响应。