问题标签 [relaymodern]

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 投票
2 回答
1632 浏览

relay - 在没有(新)变量的 Relay Modern RefetchContainer 中强制重新获取

我试图找出如何/是否可以在RefreshContainer不传递(新)变量的情况下触发 Relay Modern 中的刷新?

我正在寻找在 React Native 列表上实现良好的下拉刷新的最佳方法,它应该简单地重新获取原始查询 - 不需要变量?

根据文档(https://facebook.github.io/relay/docs/api-cheatsheet.html),这应该可以使用

this.props.relay.refetch({}, callback, {force: true})

但我收到一条错误消息,提示“未定义不是对象('评估 taggedNode.modern')”

在此处输入图像描述

如果我使用普通的旧查询,查询就可以正常工作FragmentContainer,但我只想要一个简单的下拉刷新功能:-)

编辑 为清楚起见添加更多代码。还更新了调用以反映对包含渲染变量的 API 的更改,传递 null

0 投票
1 回答
155 浏览

graphql - 不知道为什么我的 cursorForObjectInConnection 返回 null?

我在响应时遇到此错误:

不能为不可为空的字段 TodoEdge.cursor 返回 null。

这是我的突变代码:

todos 和 newTodo 是从 mongoose 数据库中检索的。我认为我正确地遵循了这个相关的 todo-modern 示例。帮助?

0 投票
0 回答
283 浏览

reactjs - Relay Modern refetch 不传递新数据

我对现代接力很陌生,所以我可能在这里做错了。此外,我很难找到有关如何完成此操作的文档。

我有一个应用程序,它提供了一个在 React 中构建的虚拟目录结构视图,其结构如下:

当视图加载中指定的 GraphQL 查询时,将QueryRenderer执行并将数据传递给ProjectDriveContainer组件并正确呈现。这个组件是这样创建的:

更改目录的方法使用不同的变量执行重新获取,我可以看到此查询正在执行并在浏览器的网络选项卡中返回正确的数据。该componentWillReceiveProps方法接收新的道具,但这些是旧的原始道具 - 即新数据没有替换道具中的对象。

我的查询如下所示:

原始查询

重新获取查询:

我在这里想念什么?

0 投票
1 回答
509 浏览

reactjs - 如何使用 createRefetchContainer 更新变量?

由于 React RelaycreatePaginationContainer不支持基于偏移的分页,下一个最佳选择是通过使用createRefetchContainer.

在 Relay Modern 文档https://facebook.github.io/relay/docs/refetch-container.html上提供的示例中,实施时将向前分页一次,但这仅仅是因为我们正在从默认状态转换为偏移量0 到我们的新状态 0 + 10。随后的点击事件会产生相同的结果,因为这些值没有被存储。

我本来预计偏移值会继续增加,但似乎并没有通过每次重新获取来维持状态。

我在 repo 上遇到了这个问题,似乎已经解决了这个问题,https://github.com/facebook/relay/issues/1695。如果是这种情况,则文档尚未更新。

0 投票
3 回答
2317 浏览

graphql - 如何在 Relay 中捕获 GraphQL 错误消息?

在我的服务器上,我的 GraphQL 实现使用了 Flask、Graphene 和 SQLAlchemy。理想情况下,我希望能够简单地操作标头并返回 401 错误响应,但 GraphQL 将所有内容都返回为 200。

使用 flask.abort(401) 但是我至少能够获得这个响应:

我认为这是一种妥协,我现在可以使用。然而; 因为没有什么可以这么简单...我不确定如何获取此错误消息。我已经读过它QueryRenderer本身可能存在一个问题,它吞下了这些 GraphQL 错误,但我可以设法Network在...中的对象中拦截它们Environment,基本上看起来像这样。

我真的不觉得在我的环境的网络层处理这个错误是管理这个错误的正确方法。QueryRenderer 似乎是最有意义的......我基本上将它设置为单一的事实来源。

顺便说一句,如果这不是很明显,我正在使用 Relay Modern。因此,任何基于 Relay Classic 的解决方案都可能不适用。

编辑:除了错误消息,我这样做的动机是正确处理 JWT 令牌。我认为我正在寻找的解决方案与处理这些错误响应无关,而是扩展了我对 JWT 的理解。

我没有意识到我的客户可以很容易地使用一个包来解码jwt-decodeJWT JWT 上剩余的时间以及是否需要刷新。

0 投票
0 回答
450 浏览

reactjs - 尝试创建一个更动态/可重用的根级别 QueryRenderer

我一直在努力实现一个泛型<QueryRenderer/>,它作为根级别的单一事实来源,最终分支成多个片段。我的初始实现在查询本身中静态定义了片段,并且会像这样接收组件作为道具......

这个设置或多或少对我来说工作得很好,因为我没有<QueryRenderers/>到处都是,只是个人喜好,我发现这个设置更干净一些。然而,我设法忽略了一个细节——我已经传播到根级查询中的所有片段都被请求了。我的假设是,由于活动的 React 组件保存了其余的片段,因此其他片段将被忽略,但事实并非如此。

我相信这种行为是由于中继如何预先构建您的数据模型,因此所有片段都在范围内。所以我的实现必然会破坏我的应用程序,但是它会导致相当多的过度获取并在服务器中为依赖于参数的任何片段创建一些异常(在此示例中,我传递 GraphQL 全局标识符以生成更详细的在另一页上查看)。

所以我尝试了另一种方法,认为我可以只预定义我的查询并将它们传递到<ComponentRenderer/>我创建的这个泛型中。

我已将查询重新定位到此处,并将先前分散到单个根查询中的每个先前片段分配给一个常量。曾经反对认为我很聪明,但没有完全理解 Relay 在构建时所做的事情。

所以问题在于 Relay 会提前构建所有内容,这意味着无论应用程序的状态如何保持不变。虽然从逻辑上讲,我应该能够有条件地决定将哪个片段呈现给<QueryRenderer/>,但这似乎确实有效,因为 Relay 的优化之一取决于预先定义 GraphQL 查询和片段的结构。

所以有点陷入僵局。我发誓我在 GitHub 上的某个地方看到了一个示例,该示例完成了我正在尝试的操作,但没有保存链接。可能只需要将查询进一步向下移动到其他组件中……这实际上可能更明智,因为 Relay 的预期设计之一是强制组件控制自己的数据需求。

编辑:这是我今天遇到的一个示例,它解决了 Relay Classic 中的类似问题。不幸的是,发生了很大的变化,这并没有将所有内容完全转化为现代......但它给了我希望。使用 Relay 和 React-Native 时的条件片段或嵌入的根容器

0 投票
1 回答
198 浏览

javascript - 如何在中继和 graphql 模式中正确创建连接?

我正在尝试在我的架构中的中继和 graphql 中创建分页。这是我的代码:

我在 todo-modern 中创建了这个类似的示例,在我的 TodoListHome 组件中,这是我的 graphql 查询:

更新架构时没有问题,但是当我尝试构建时,这是我的错误:

不变违规:RelayParser:id类型上的 未知字段FriendByUserConnection。来源:文档TodoListHome_viewer文件: C:\Users\PE60\Desktop\socialnetworking-todoapp\js\components\TodoListHome.js.

执行甚至没有达到解决,所以我无法登录。但我相信错误不是来自那里。帮助?

0 投票
2 回答
606 浏览

reactjs - 如何将自定义道具传递给 QueryRenderer 渲染函数?

给定以下 QueryRenderer 组件:

我遇到的问题是当我自己的道具更改值renderProjectList时不会再次执行。selectedProjectrender方法显然确实被触发了,但是由于没有任何 propsQueryRenderer被更改,renderProjectList因此也没有被调用。

处理此问题的最佳方法是什么?

0 投票
1 回答
483 浏览

reactjs - 没有数据的中继容器

我正在使用 Relay Modern 构建一个应用程序,作为我第一次真正涉足 React、Relay 和 GraphQL。

基本情况是,我有一个不需要任何数据的登录表单组件;也就是说,组件渲染了一个表单,并且有一个对应的mutation,但是不需要查询任何东西。

似乎在调用时提供 Relay 样式的查询片段是必要的createFragmentContainer,这反过来又确保this.props.relay不会null在组件的上下文中。

现在,我正在为登录表单使用标准(非中继)React 组件,但结果我无法访问中继环境以将其传递给突变。

我的问题 - 有没有办法本质上传递一个“空”中继片段?还是在这种情况下推荐一些更好的成语?

0 投票
2 回答
929 浏览

react-native - 现代继电器:如何模拟继电器进行单元测试

我正在尝试测试反应中继现代容器,但遇到了这个问题。

这是测试代码: