问题标签 [react-router-relay]

有谁知道在发出请求时是什么导致中继中这些巨大的阻塞功能？我有一个可以调用的搜索框，setVariables它非常引人注目。

它在生产中要好得多。不过还是很好奇

我做了一个新鲜的npm install，突然收到以下错误

这是我的根容器

我有一个 Relay 应用程序，我想清除登录后显示的组件的缓存。我尝试将 currentRelay.store 传递到我的 Relay.Router 并实现 currentRelay.reset() 将该存储设置为新的 Relay.Environment ，然后在注销后调用它。由于某种原因，缓存仍然被存储。我还尝试在 componentDidMount() 中调用 this.props.relay.forceFetch({}) 和 this.forceUpdate()。我可以清除缓存的唯一方法是手动刷新页面。我想知道 Relay.Environment 中是否存在错误，或者我做错了。

我的应用中有 3 个页面（使用 的组件react-router-relay）ProductList、ProductDetail和BrandList.

为了说明问题，让我看一下流程并将代码留在底部。

• 首先我去ProductList查看产品列表，每个产品都有品牌名称。它按预期工作。

• 然后我点击其中一个产品，这将呈现ProductDetail. 一切仍然按预期工作。

• 现在当我去时BrandList，问题是中继向node(id: $id_0)服务器发送多个查询。

发生的情况是 Relay 的商店已经brands在ProductDetail. 在第 3 步中，BrandList要求提供比 Relay 商店当前拥有的更多的字段。所以 Relay 发送了多个node查询，30 个查询，因为我有 30 个品牌，但是这效率低下并且明显慢。

我可以通过询问([A]) 和([B])中的相同字段来解决此问题（请参阅下面的查询）。但是，这意味着获取它不使用的不必要的字段。ProductDetailBrandListProductDetail

我不确定我是否在这里遗漏了一些非常明显的东西，或者在这种情况下有更好的方法来避免多节点查询。如果我可以告诉 Relaybrands在上面的步骤 3 中完全重新获取 Relay 已经存储了部分数据并发送node查询以获取更多字段，那会更好。

// 每个组件的相关查询。请注意下面关于[A]和[B]的评论

ProductList

ProductDetail

BrandList

onUpdate启动渲染时似乎调用了路由器的回调，有没有其他方法可以在所有组件渲染后调用函数？

类似的ReactDOM.render回调...

我很难理解中继路由、react-router 参数以及构建查询和容器！

当用户单击 FeatureList 中的特定功能时，我想编辑功能。它传递了一个名为“id”的参数，它是 Route.js 中 Feature 的 id

在我的 FeatureQuery 文件中，我有以下查询：

在这一点上，我完全被卡住了。如何扩展它以包含“id”并使用“id”查询功能？相关的中继容器片段会是什么形状？我只看到深入一层的例子。

我试过了，但我知道这是不对的：

这是获取功能列表的当前中继容器，如何修改它以仅通过 id 返回 1 功能？：

我在 GraphiQL 中测试了一个查询，它按预期工作：

结果：

架构.js：

我正在使用 react-router 和 react-router-relay 来处理我的应用程序上的路由。我在尝试访问在 url 路径中传递的 id 参数时遇到问题。这样做的正确方法是什么？

路由.js

创意查询.js

我有一个架构，其viewer最顶层的根元素和所有其他数据都在它之下：viewer有一个列表users并提供一个user(id). 我的根查询中没有其他元素。

我的根组件定义了以下路线：

这些是查询 - 我不知道如何UserQueries嵌套，ViewerQueries或者这是否可能：

我对UserDetails组件的目标是从

目前，尝试此操作时出现以下错误：

我如何教 react-router-relay 让它UserDetails从中获取数据

query { viewer { user(id) } }

而不仅仅是从

query { user(id) }?

出于某种原因，如果我生成一个根查询，它在注入子组件之前接受参数，如下所示：

Relay 最初生成这个查询：

变量：

但是，如果组件的中继容器有自己的变量，运行this.props.relay.setVariables({...variables})会完全将中继生成的请求查询变成这样：

变量：

但是，如果我有一个没有参数的根查询，setVariables 可以正常工作：

这是生成的查询：

变量：

在工作设置中的 setVariables 之后：

变量：

版本：

我不确定我的配置是否有问题，或者这只是 Relay 端的错误。

有谁知道可能导致此问题的原因？

我想为 react-router-relay 创建 Typescript 定义，但是 react-router-relay 的扩展性质让我很难过。react-router 暴露了一个带有一些属性的路由器组件，还包括一个渲染属性。react-router-relay 使用此渲染属性为路由器提供中间件。在此路由器还接受可以提供中继的环境属性之后。

如何告诉 typescript 在我的模块 react-router-relay 中我扩展了模块 react-router 的定义？

我尝试了以下操作，但随后我将不得不复制 react-router 的每个组件：

是否也可以直接扩展 react-router 的 RouterProps 和 RouteProps ？

编辑：路由器中继的应用如下：