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

时间:2018-12-03 04:13:19

标签: relayjs relay relaymodern

我有一个公用的HeaderFooter,它们显示可能已经在中继存储中的数据,而主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>
  }}
/>

但是我有一些问题:

  • QueryRenderer在卸载时处理数据:cry:(尽管我从其中读取的信息也应由Query检索,但是从存储中读取数据更像是查询返回时的回退)
  • 语法看起来很笨拙
  • 我必须创建一个查询并进行编译(无论如何我都可以使用它)

我可能是用错误的方式来解决问题,也许有人做了类似的事情,可能会给我一些建议。 (以防万一,我的计划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:我想在查询完成加载后从商店加载数据,然后使用从查询返回的数据。

有什么想法吗?让我知道是否不清楚

2 个答案:

答案 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传递数据,然后再从服务器获取响应。