3

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

因此，如您所知，如果我将所有内容都包装在 aQueryRenderer中，我将有两个选择：查询正在“加载”或数据可用：

<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：我想在查询完成加载时从商店加载数据，然后使用从查询返回的数据。

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

4

2 回答 2

1

阅读商店relayEnvironment听起来不是一个好的解决方案。如果你给QueryRendererthe加上Header一个，你会怎么想Footer？因此，每个人都将获取自己的数据，与页面内容分开。那有意义吗？

希望能帮助到你 ：）

于 2018-12-04T11:54:45.107 回答
0

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)

现在对于 observables，从 '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();
    });
  };

现在，如果场景是您想重用来自另一个查询的数据，那么缓存的情况可能不适用于您。但是如果您能够从存储中获取数据，那么您应该能够在从服务器获得响应之前使用可观察对象来传递数据。

编辑：

Relay 自原始回复以来添加了一些新功能，现在可以像这样实现相同的功能：

// Create relay environment
const environment = new Environment({
  network: Network.create(/*...*/),
  store,
  gcReleaseBufferSize: 10, // Relay will cache the 10 latest responses
});

// Then set fetchPolicy on your QueryRenderer

<QueryRenderer {...otherProps} fetchPolicy="store-and-network" />

如果可用，中继现在将使用来自存储的响应，并且当响应从服务器返回时，使用来自服务器的响应。

于 2019-03-31T10:34:23.667 回答