问题标签 [react-router-relay]

我有一个当前正在运行的 React/Relay 应用程序，我想使用 react-router-relay 添加路由。当我尝试最小可能的转换时，请参阅下面的代码，我在日志中收到一个难以理解的错误：“未捕获的错误：不变违规：RelayQueryNode：无效的具体节点。”

表达这个问题的另一种可能的方法是：指定普通中继的 RelayRoutes.queries 和 react-router-relay 的路由查询的适当方法之间有什么区别？

我正在寻找将变量从父容器传递到子容器的良好语法。

假设我有这些路线，其中有一个全局小部件列表/和特定的小部件列表/widgets/:WidgetListID。

注意：我使用 react-router-relay

它是相同的<WidgetList/>组件，在<WidgetListContainer/>内部呈现<Layout/>，这是我尝试传递WidgetListID变量的方式：

布局.js

WidgetListContainer.js

小部件列表.js

我直接在 WidgetList 中继容器内设置变量没有问题WidgetListID，它工作得很好，但是一旦我尝试从 WidgetListContainer 中继容器传递它，我就有一个空的数据对象{__dataID__: "VXNlcjo="}。不过，该变量在我的 getWidget() 函数中打印得很好。所以有些东西在某些时候不起作用，但我不知道是什么？

将WidgetListID变量从父容器传递到子容器的好语法是什么？

假设我在带有 react-router-relay 项目的中继中有以下根查询：

的初始值$number来自服务器，就像一个隐藏的输入，我想在我对服务器的第一个查询中使用这个数字。如何$number使用当前的 react-router-relay API 传递给我的查询？这既不是 a 也不queryParam是stateParam。

I am running into an issue where when requesting data within two adjacent react-router-relay route components using the same root query, the graphql server query in the second route component invalidates the data previously retrieved from the first.

As an example:

I am using a workaround to attach fields to a 'viewer' root node, in order to query for arrays of data from a root field:

My schema.js includes the following definitions for the viewer (User) type and the root:

And the root:

Now, in the main.jsx application entry point, I am defining the following routes:

with ViewerQueries.js containing:

Now, if the App component includes the following graphql fragment:

And the AllCars component includes the following:

what happens is that on rendering of the App component on path '/', the array of cars is returned without problems. However, once the '/cars' path is rendered, the resulting array on `this.props.viewer.cars' is empty. In addition, returning to the path '/' to cause a re-rendering of the App component now also returns an empty array.

On the back-end, it appears the AllCars component causes an additional POST /graphql 200 277.369 ms - 94 trip to the server to fetch the new type specified in the fragment. If the AllCars component only includes the 'name' field, Relay correctly doesn't make another server request, but instead populates the array with data (supposedly cached from the initial App component server request).

Shouldn't it be possible to get the array of cars from either component, with Relay getting any additional data fields specified in the fragments regardless of the order they appear in the routes?

Any help would be greatly appreciated!

我在使用 react-router-relay 和嵌套路由时遇到了一些麻烦。

我有一个如下的路由器设置：

路线代码在这里

当我到达时/events/:eventId/sessions/:sessionId，我的组件根本没有被渲染。

我可以看到从服务器返回的该组件的 graphql 片段，但我没有渲染任何组件。

我在这里发布了一些代码。如果有人能看一看，我将永远感激不尽。

我的服务器端是 rails，我使用 react-rails 和服务器端渲染（prerender：true）。最近开始使用带有 react-router-relay 的中继，但这样一来，服务器端渲染不再可能，因为显然获取数据涉及与涉及超时等的 graphql 服务器通信，这些在服务器渲染时不可用。所以我想肯定有办法将数据预先注入到服务器端的中继存储中，以避免调用graphql。我找到了这个库：https ://github.com/denvned/isomorphic-relay-router ，但我不能使用它，因为它与 react-rails 的使用不兼容（例如，我在任何地方都没有 app.get我的应用程序，所以没有地方可以使用那里提到的匹配功能）。关于如何使这项工作的任何想法？

我在react-router-relay上读到：

react-router-relay 将自动生成包含来自活动 React Router 路由的所有查询和参数的组合 Relay 路由，然后将查询结果传递给每个路由组件。由于查询都收集到一个单一的路线上，它们都将被同时获取，整个页面的数据将一次性加载并呈现。

但在我的应用程序中，我实际上看到两个单独的调用/graphql. 这是我的代码：

第一次调用为 获取数据AppSkeleton，第二次为获取数据Sites。难道不应该将它们全部折叠成一个电话吗？我究竟做错了什么？

突变后处理成功或错误的最佳方法是什么？

我正在使用 React.js 和 react-router-relay 进行 graphQL 查询和突变。

假设我有一个 React 组件执行重命名突变。我希望在突变完成后有一个用户回调说

• “对象已成功重命名”或
• “错误：名称已被占用”或
• “错误：名称必须至少有 10 个字符长”
• 等等

我怎么能有这种回调？以及如何处理不同的错误代码？

我正在尝试使用 react-relay-router 学习 React Relay 和 GraphQL，但无法在我的工作路线中获取参数。我的困难在于“/Maps/:userID”路线。

这是我的路由器：

这是我的中继容器和根查询：

这是我在路由参数中插入用户 ID 的反应组件中的位置。我正在使用 react-router 中的 browserHistory。“1”是我的测试用户 ID。

这是我的架构的根查询：

我尝试按照 react-router-relay Github 页面上的示例代码进行操作，但出现控制台错误：

警告：[react-router] 位置“/Maps”不匹配任何路由

感谢您提供的任何建议。

我从 Relay 开始，并试图让我的路由正常工作。不幸的是，我运气不佳。

这是我得到的错误：

未捕获的 TypeError：Component.getFragment 不是函数

这是我供您参考的代码：

索引.jsx

应用程序.jsx

主页.jsx

更新

freiksenet我做了如下建议的一些更改。但这引发了以下两个问题：

1. 当我更改路由和组件而不是Home由组件呈现时会发生什么App？
2. 我现在收到此错误：

警告：RelayContainer：预期道具store将提供给 Home，但得到undefined。null如果这是故意的，请传递一个明确的。

以下是更改：

索引.jsx

应用程序.jsx