relayjs - 在加载查询时从中继存储加载数据

Question

我有一个共同点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:我想在查询完成加载时从存储中加载数据，然后使用查询返回的数据。

有什么想法吗？如果有什么不清楚的地方，请告诉我

Answer 1

使用 relayEnvironment 读取存储听起来不是一个好的解决方案。如果为 Header 放置一个 QueryRenderer，为 Footer 放置另一个，您会怎么想？所以每个人都会获取自己的数据，与页面内容分开。这有意义吗？

希望对您有所帮助:)