relayjs - 如何处理 Relay Modern v6/experimental 中的嵌套路由

Question

我知道 relay documentation指出 react-router v4/5 对 Relay 不好，因为它们改为动态路由，但如果你仔细观察，它总是说:

"Last updated on 2017-6-3 by Jimmy Jia"

而且我也真的不想使用“Found Relay”。

我希望仍然能够访问我的 QueryRenderer 或 useQuery 而不是其上的抽象，所以你不能，这就是 Found 正在做的，所以这是不行的。

所以......随着刚刚发布的 Relay Modern v6，并在中继实验中偷偷摸摸地使用 useQuery、useFragment 等与 React Suspense 和 @defer 集成的钩子(Hook)(希望如此)即将到来 - 有什么建议和最好的2019 年使用 Relay Modern v6 处理嵌套路由的实践。

与 Suspense 的集成是不是动态路由开始变得更有意义了？

有很多关于非常简单的继电器应用的例子，例如 https://github.com/relayjs/relay-examples/ ，但到目前为止我还没有找到一个很好的例子来展示如何以适当的方式处理 Relay 中的嵌套路由。通过“以适当的方式”，我不是在谈论使用“发现中继”，而是使用仅执行“路由”部分并且做得很好的路由器。

Answer 1

我来自 future (2021 年)，不幸的是，这仍然是一个问题。
然而，一个改进是 React Router 发布了一个支持预加载的实验性 v6 分支。请注意，这与不包含实验性功能的 v6 beta 分支不同。当然，因为这是实验性的，你不能假设它会稳定，所以你可能想要固定封​​装直到它变得稳定。
可以在此处找到有关如何使用此集成的一个很好的示例:https://github.com/Hellzed/hello-relay-react-router-experimental .如果可以，请注明(并在 github 上加星标)此示例的原作者。我将在这个答案中使用这个例子。

您可以使用以下方法安装此版本的路由器:

npm install history react-router-dom@experimental

然后，您按如下方式编写您的应用程序:

import React from "react";
import { useQueryLoader, usePreloadedQuery } from "react-relay/hooks";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import graphql from "babel-plugin-relay/macro";

const query = graphql`
  query AppHelloQuery {
    hello
  }
`;

function Hello({ queryReference }) {
  const data = usePreloadedQuery(query, queryReference);
  return <p>{data.hello}</p>;
}

function App() {
  const [queryReference, loadQuery] = useQueryLoader(query);

  return (
    <Router>
      <Routes>
        <Route
          path="/"
          preload={() => loadQuery()}
          element={
            <React.Suspense fallback="Loading...">
              <Hello queryReference={queryReference} />
            </React.Suspense>
          }
        />
      </Routes>
    </Router>
  );
}

基本上所有内容都与中继文档和用于路由的 react-router 文档相同，除了您添加 <Route preload={() => loadQuery()}> ，连接中继和路由器。