您如何使用路由器从库存继电器转移到继电器？

Posted 2023-03-08

【中文标题】您如何使用路由器从库存继电器转移到继电器？

【英文标题】：How do you move from stock Relay to Relay with a router?

【发布时间】：2015-12-18 23:05:36

【问题描述】：

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

import 'babel/polyfill';
import TodoApp from './components/TodoApp';

import  Router, Route  from 'react-router';

import ReactRouterRelay from 'react-router-relay';
import TodoAppHomeRoute from './routes/TodoAppHomeRoute';

/*

This section works perfectly

ReactDOM.render(
  <Relay.RootContainer Component=TodoApp route=new TodoAppHomeRoute() />,
  document.getElementById('root')
);
*/


//This breaks every time.
ReactDOM.render(
  <Router
    createElement=ReactRouterRelay.createElement>
    <Route
      path="/"
      component=TodoApp
      queries=new TodoAppHomeRoute().queries // and the query
      />
  </Router>,
  document.getElementById('root')
);

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

【参考方案1】：

其他几个人报告了这个问题here。

看起来像为每个 Relay 和 React 添加显式 import 在你的组件中可能会解决它（我刚刚看到这个并为我修复了它）：

import React from 'react';
import Relay from 'react-relay';

如果失败，请使用npm install --save react react-relay graphql graphql-relay react-dom 更新您的依赖项。

【讨论】：

是的，这就是错误，感谢您为我找到了 github 问题。当我创建 *** 问题时，我要么没有找到它，要么它还不存在。未使用的导入会解决问题似乎很奇怪。一个有趣的架构选择...

我跟进了 this fix 在示例中进行了所有导入（以及在入门工具包中进行了相应的提交），以减少人们在未来被这个问题所困扰的可能性。跨度>

【参考方案2】：

如果 Chris 的回答不起作用，@cpojer 在这里写了一篇关于路线和中继的非常棒的帖子：https://medium.com/@cpojer/relay-and-routing-36b5439bad9

【讨论】：

感谢 Yuzhi，不幸的是那篇文章是我开始的，并且由于我怀疑各个团队在他们的库上迭代的速度已经包含许多错误。我上面的例子与 Medium 文章的建议非常接近，但由于我还没有猜到的原因，它不起作用。

【参考方案3】：

我猜new TodoAppHomeRoute().queries 是罪犯。我的直觉是它可能是一个静态属性。试试这个TodoAppHomeRoute.queries。

如果这不起作用，让我们看看TodoAppHomeRoute中的代码