How to deal with nested routing in Relay Modern v6 / experimental

Question

I know the relay documentation states that react-router v4/5 is no good with Relay since they changed to dynamic routing, but if you look really closely it always says:

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

And I really do not want to have to use "Found Relay" either.

I'd like to still be able to access my QueryRenderer or useQuery and not an abstraction on top of that so you can't, which is what Found is doing, so that is a no-go.

So... with Relay Modern v6 just released, and taking a sneak-peak at relay-experimental with useQuery, useFragment etc. hooks that integrates with React Suspense and @defer (hopefully) just around the corner - what are the recommendations and best practices for handling nested routing in 2019 with Relay Modern v6.

With the integration with Suspense isn't dynamic routing starting to make more sense?

There are lots of examples on very simple relay applications, such as https://github.com/relayjs/relay-examples/, but so far I have yet to find a good example showing how to deal with nested routes in Relay in a proper way. And by "in a proper way" I'm not talking about using "Found Relay", but using a router that only does the "routing" part and does it well.

Answer 1

I come from the future (2021) and unfortunately this is still a problem.

However one improvement is that React Router has released an experimental v6 branch that supports preloading. Note that this is not the same as the v6 beta branch which does not include experimental features. Of course because this is experimental you can't assume it will be stable, so you may want to pin the package until it becomes stable.

A great example of how to use this integration can be found here: https://github.com/Hellzed/hello-relay-react-router-experimental. Please credit (and star on github) the original author of this example if you can. I will use this example in this answer.

---

You can install this version of the router using:

npm install history react-router-dom@experimental

Then, you write your app as follows:

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>
  );
}

Basically everything is written the same as in the relay docs and the react-router docs for the routing, except that you add <Route preload={() => loadQuery()}>, which links up Relay and the router.