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

Question

我有一个常见的Header和Footer，显示它可能已经存在于继电器存储中的数据以及需要来自“查询”的数据的主要PageComponent，但我不想向用户显示完整的加载屏幕，我想要显示页眉，页脚和中间的加载屏幕或内容。

所以，如你所知，如果我将所有内容都包装在QueryRenderer中，我将有两个选项：查询是“正在加载”还是数据可用：

<QueryRenderer
  {...usualProps}
  render={({ error, props }) => {
    <div className="app-wrapper">
      { props || error ? <PageComponent {...props} error={error} /> : <div>Loading...</div>}
    </div>
  }}
/>

假设我有办法从商店手动检索数据（因为我们没有像商店中的部分渲染那样），并且我可以在加载主查询时将该信息传递给常见的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检索，但是当查询返回时，从存储读取更像是回退）
• 语法看起来很hacky
• 我必须创建一个查询并编译它（无论如何我都可以使用它）

可能我是以错误的方式解决问题，也许有人做了类似的事情，可以给我一些指示。 （如果没有任何作用，我的计划B是使用getDerivedStateFromProp将查询信息发送到自定义上下文并将其保存在那里以避免存储GC问题，例如）。

TL：DR：我想在查询完成加载时从商店加载数据，然后使用查询返回的数据。

有任何想法吗？如果有什么不清楚，请告诉我

Answer 1

用relayEnvironment阅读商店听起来不太好。你觉得如果你把QueryRenderer用于Header而另一个用于Footer，你怎么看？因此，每个人都将从页面内容中获取自己的数据。那有意义吗？

希望能帮助到你 ：）

Answer 2

Relay具有Observables和Cache，可以组合使用以实现此目的。

您可以从'relay-runtime'导入{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，从'relay-runtime'导入{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传递数据。