问题标签 [react-router-relay]

也许这是一个非常具体的问题，但我相信它会找到解决方案。我发现很多人在登录/注销后询问环境变化。

我正在使用 redux 来存储有关登录、模式、表单等的应用程序状态逻辑，并中继以获取数据。登录/注销后，我使用连接的路由器触发新环境的重新渲染

我的路线定义如下：

renderAppRoute 函数定义了在不同的中继状态下渲染什么，比如如果正在获取完成

在我更改环境后，我得到了错误(index):7 Uncaught TypeError: Cannot read property 'user' of undefined(…)。这是因为在初始提取时，道具未定义并且正在进行提取。在道具中完成获取后，您可以找到 RelayContainer 等的片段定义。但是在切换到新环境后，道具永远不会未定义，因此它正在渲染我的组件但没有存储数据。是否有可能以某种方式检测或者是否有某种方法可以识别环境是否是新的，或者我们是否需要在用户端创建一些自定义逻辑？

我目前正在使用isNewEnvironment我设置为 true 的新变量来创建它，当我创建新环境时，设置为falserenderAppRoute之后params.donetrue

在编写 GraphQL 查询片段作为 a 的一部分时RelayContainer，我一直在努力解决如何在某些情况下设置查询变量。文档中概述的基础知识非常简单。但是考虑到这些查询的静态特性以及 a 如何RelayContainer是高阶 React 组件，当查询所需的输入是来自外部源（例如 Redux 存储）的对象时，我不确定处理这个问题的最佳方法。在组件加载之前，我没有任何方法从该存储中检索数据，因此作为一种解决方法，我一直在使用该@include指令并在组件加载后将就绪变量设置为 true：

最后，这按预期工作，但我担心这更像是一种黑客行为，并且我错过了 Relay 应该如何处理查询变量的重要信息。有一个更好的方法吗？prepareVariables看起来很有用，但我仍然无法访问我的数据存储。这是我明显的选择：

1. 保持原样
2. 将其转换为将在组件生命周期方法中执行的突变。我宁愿不这样做，因为它会删除与组件的数据绑定。
3. 使用自定义RelayNetworkLayer（可以访问我的商店）来拦截我的查询并从那里的外部商店设置变量。这也感觉像一个黑客。

默认的 react-router 是这样使用的：

当我包含“react-router-relay”库时，它会向路由器添加功能。也就是说，它向路由器组件（渲染和环境）添加了 2 个属性：

我将如何增加 react-router 类型？

我尝试了很多方法，最新的是：

因为我需要扩展命名空间“Router”和它下面的接口“RouteProps”。

链接到 React 路由器类型：https ://www.npmjs.com/package/@types/react-router

React-router-relay 库本身没有任何类型。

我找到的有关此主题的所有信息：

• https://github.com/Microsoft/TypeScript/issues/11034
• https://github.com/typings/typings/issues/611

• 所以问题似乎是反应类型永远不会导出命名空间，因此不可能增加它们

是否有可能以某种方式更改查询变量以进行查询？我的想法是，我使用名为pageSize. 现在，当用户在浏览器中打开一个项目并按下后退按钮时，我将向他显示他之前看到的页面。但是路由状态在刷新时也会持续存在，所以我想听onReadyStateChange，如果事件CACHE_RESTORE_FAILED会被触发，我想更改pageSize为初始状态尺寸。是否有可能以某种方式在 Route 级别收听此更改？

在@chris 评论后添加一些代码：

路线：您可以看到我如何从路线状态中获取 pageSize

不需要显示任何 ProductList 代码，现在它只是呈现连接。这个想法很简单，你打开产品列表页面，点击显示更多几次，pageSize 编号从 20 增加到 100。用户然后单击产品编号 99，我向他展示产品，他点击返回，他看到他有谁以前见过。太好了，路线状态被记住了很多次。但是在用户在浏览器中单击刷新后，路由状态也保持不变，所以我正在查询以获取前 100 个产品，这太多了。我想收听事件，如果在本地内存中找不到产品（环境已切换或页面刷新），我想更新变量以仅获取前 20 个。

我目前正在试验一个单页应用程序实现，它由一个布局组件和交换嵌套在里面的许多页面组件组成。Layout 上的 Relay 容器和许多 Pages 共享变量（在本例中为$groupId），这些变量用于过滤其片段中的查询。

问题是当前的实现为每个活动路由分配了两个请求，而不仅仅是一个。我可能正在接近这个错误，但是我如何组合请求或构建应用程序，以便只发布一个setVariable({groupId: ... })将更新两个组件，而不必分别在两个组件上设置变量。

路由配置

观众查询

布局

仪表板页面

我的目标是将相同arrays的多个嵌套同级组合到一个调用中。edgesRelay fragmentrender

后端数据通过Relay容器传递（也使用react-router-relay）。

我有一个组件层次结构，它显示Tags来自几个不同的多个Users. 顶级查询如下所示：

结果是这样的（完全扁平化的形式）：

目前我渲染一个层次结构，每个层次都有node Type自己的Component，即Tagmenu-> UserTagGroup-> TagItems（代码在这篇文章的底部）。

这将所有标签按 分组User，最终呈现如下列表：

我想要实现的是render所有Users' 标签在第二层混合在一起，即像TagMenu->这样的层次结构TagItems，以呈现：

到目前为止，我可以管理的唯一方法是手动从顶级Relay容器结果中提取和组合所有数组，如下所示（伪代码）：

这似乎不正确，原因有两个：

1. 打包成一个render()函数有点多，
2. 目前尚不清楚是否可以在 Relay中防止nullrefsdefault props

...但这显然是可行的。

我的问题是：Relay这样做的方法是什么？考虑到库如何自然地导致组件组合，我无法想象在更高级别拉深嵌套结果并手动改组它们是最佳的。这是我的组件：

我有这样的路线

基本Search组件看起来像这样

SearchResult中继容器看起来像这样

错误：

我在搜索组件中尝试做的事情（更改为粗体）

但当然这不起作用，因为查询需要以某种方式附加到Route

问题

1. 我的Search组件只是一个展示组件，不需要自己的数据。相反，它只是向中继容器提供一个query道具。SearchResult我应该如何构建组件和中继容器以正确地将它们附加到路由？

2. 如何使用SearchResult query道具在中继查询片段中设置变量？

3. 我一般不理解“查看器”的抽象——我见过的大多数例子都非常做作，并没有显示它们在更现实的环境中是如何工作的；例如，对不同资源具有不同访问权限的用户，或旨在查看不同数据片段的程序的不同部分

我很难弄清楚 Graphene Django 应该与 react-router-relay 一起使用的方式。假设我可以通过 Django 服务器上的 GraphiQL 控制台使用以下 GraphQL 查询：

这可能是 Graphene 对常用viewer包装器的替代品，因为 Relay 不支持根查询上的连接。所以我知道 allThreads 实际上是一个节点（类型为 ThreadNodeConnection），并且有一个可以查询的边连接。

问题是我不知道如何将它与 Relay 一起使用，特别是 react-router-relay。我有一个 React 视图，上面有这样的片段（在其他地方有一个子 Thread 组件）：

Webpack 会根据我的实时模式检查它并喜欢它。然后我在我的 index.js 中为路由器创建以下内容：

我已经有点不确定了，因为我认为我做错了 ViewerQueries，但很难知道，因为其他人都使用它来容纳他们viewer的 GraphQL 连接上的包装器，但是 Graphene 在每个连接上都有不同的包装器，所以这可能只适用于我的单一路线，但现在没关系。Webpack 再次喜欢它反对模式。但是当我加载页面时，我收到一个“错误请求”和以下错误：

“F1 片段不能在这里传播，因为 ThreadNodeConnection 类型的对象永远不能是 Query 类型”

老实说，这就是我无法继续进行的地方，因为我显然不了解 Graphene Django 如何构建模式，或者应该如何编写 GraphQL 片段，或者应该如何编写 Route 查询。麻烦的是我无法弄清楚这些事情中哪一个是错误的，而且似乎没有任何资源可以围绕使用这些特定技术组合的人们。

为了完整起见，我的 Graphene Django 架构设置是（略微简化）：

项目/线程/schema.py：

项目/schema.py：

如果有人以前使用过这种特殊的组合并有任何建议，那就太棒了。

我遇到了下一个问题。在my app我使用中继、自定义网络层和中继路由器

对于普通route我声明查询，获取一些数据：

在分配之前component，router我有下一个中继容器：

默认情况下它会获取{query { viewer } }，因为 $isNoDataCached 是 false。

并返回

500 错误。

那么，如果我不需要获取数据，有什么方法可以停止数据获取？

我无法/users在我的应用程序中导航到，因为它不会触发我期望它应该触发的所有查询的获取。

我的应用程序由一个App组件和一些包含实际内容的组件组成，例如Dashboardor UserList。还有一个EnsureAuthenticationContainer，但这只是一个组件，当用户通过身份验证时，它只是呈现它的孩子。这是我的路线设置：

[...]

问题是，两者App都UserList定义了片段，似乎只有UserList发送的查询。

的片段App：

的片段UserList：

如何设置 React/Relay/Router 来同时查询users和loggedInUser？

更新

我使用 react-router@3.0.5 和 react-router-relay@0.13.7

更新#2

这是我访问“/users”时中继生成的唯一查询，并将其发送到服务器：

响应与查询匹配：