问题标签 [react-relay]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
23 浏览

reactjs - 如何使用 limit(Int) 和 offset(int) 参数在 UI 中使用 createPaginationContainer 呈现数据

我正在一个项目中工作,我需要显示数千个数据,为此我将 createPaginationContiner 与 graphql 一起使用。但问题是我无法在我的查询中添加限制和偏移量来获取有限的数据并使用偏移量更改该数据,这会给我带来无限的滚动效果。

0 投票
1 回答
41 浏览

reactjs - 如果我们使用 loadQuery 和 usePreloadedQuery 与 loadQuery 和 useLazyLoadQuery 挂钩,反应中继将如何影响性能?

  1. loadQuery 和 usePreloadedQuery - 这个组合实际上是高效的,因为我们在 usePreloadedQuery 钩子中使用 loadQuery 返回的引用,所以这遵循“render-as-you-fetch”模式。
  2. loadQuery 和 useLazyLoadQuery - 如果我们使用这个组合,那么它也提供与第一个组合相同的性能。根据文档,我们应该将 usePreloadedQuery 查询钩子与 loadQuery 一起使用。当我们将 LazyLoadQuery 与 loadQuery 一起使用时,它不会进行额外的 API 调用,因为它使用我们从 loadQuery 获取的相同数据。

所以实际上这两种方式是相同的还是不同的?就良好的架构而言,什么应该是首选方式,为什么?

0 投票
0 回答
13 浏览

relayjs - 在更大的应用程序中添加或删除边时如何更新连接/边?

在应用程序中添加或删除边时如何更新连接/边?

TL;DR:我应该

  1. 知道应用程序中的所有片段和连接,并在我执行这些突变时处理它们?
  2. 将我的应用程序分成多个上下文(即页面),并在更改上下文时重新获取我的连接?

对于一个简单的上下文(例如将用户添加到用户列表),我有我的查询和片段的概述,@appendEdge并且@deleteEdge工作正常。

但在更大的背景下,它变得更加复杂。就我而言,我有一个页面,其中包含可以添加书签的故事提要。在另一页(很远)我有我所有的书签故事。

对于删除书签,我可以使用@deleteEdge并拥有一个连接 ID 列表,用于监听已删除的书签。这可以通过某种观察者模式来解决,如下所示:

对于添加书签,它变得更加复杂。我可以使用相同的方法,但这应该以某种方式告诉应该为书签加载哪些额外的片段 - 我认为这在运行时是不可能的

正如我所看到的,我有上述两个选项。如果我选择选项 1,则所有开发人员在执行添加/删除突变时都需要了解应用程序的整个中继部分。选项 2 提供了一些更松散的耦合(通常很好),但会在短时间内提供更多的网络请求和陈旧数据。

很容易有第三种选择可以解决我所有的问题。

0 投票
0 回答
25 浏览

react-native - FlatList 中的悬念

我正在使用 Relay 开发一个 React Native 应用程序。我正在使用这样的FlatList内部ScrollView

我遇到了问题ondEndReached(每次都被调用)所以我转向这样的事情:

这可以正常工作(onEndReached在必须时调用),但是当我使用 Relay 时,我必须使用Suspense来添加 Spinner/Loader,如果我将其包裹FlatList在其中Suspense,它将暂停所有组件(包括 Header),而不仅仅是这几项。

您对如何前进有任何想法吗?一种替代方法是使其在FlatList内部工作,ScrollView而另一种方法是使其Suspense仅对来自FlatList. 谢谢!

0 投票
0 回答
19 浏览

javascript - 为什么 watchman 与 react-relay 一起使用时会出现超时错误?

我正在使用 WSL Ubuntu 运行 react-relay 项目,但是在使用 brew 安装 watchman 并尝试在 watch 模式下运行应用程序后,watchman 给了我以下错误(我已经使用 运行项目yarn start):

我一直在尝试在没有 brew 的情况下重新安装 watchman,使用 brew,我得到同样的错误,互联网上没有任何帮助......

我的 package.json 文件:

relay.config.js 文件

.babel.rc

项目结构: 在此处输入图像描述

PS:在没有任何守望者的情况下运行项目时,它工作得很好

0 投票
0 回答
12 浏览

relayjs - 注销时应该如何清除 Relay JS 存储?

我正在使用反应中继 v12。

注销时,我是否应该创建一个新的中继环境(而不是例如以某种方式清除存储)?我一直在这样做,但我现在遇到了问题,因为 RelayEnvironmentProvider 上下文中的 Relay 环境没有更新。理论上我可以使用钩子手动更新它,但这在某些地方很困难(例如中继网络中间件,状态容器)

最简单的解决方案似乎是避免创建新商店,而是清除旧商店。那可能吗?还是有更好的解决方案?