Setting up relay (graphql) and react-router v7 framework mode #13085

johnsonjo4531 · 2025-02-21T16:48:44Z

johnsonjo4531
Feb 21, 2025

Hey all I just wanted to share that thanks to some continued discussion on the graphql discord in relay's channel I got relay (a.k.a. react-relay which is a GraphQL client) and react-router-v7 framework mode working together 🥳 🎉🎉. My idea for getting them to work together is so hopefully I can get preloading of queries done by the router so I can fetch data before I render using the render-as-you-fetch pattern. Here is an example repo of relay and react-router v7 working. I will hopefully update my example repo with the render as your fetch pattern once I get it working. The following was my final vite config that ended up working the graphql rollup plugin and tailwindcss and tsconfigPaths should hopefully be optional leaving only the reactRouter and relay plugins there should be enough for most projects. Also the optimizeDeps and noExternal options are both very important to get it working:

vite.config.ts

import relay from "vite-plugin-relay";
import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import graphql from "@rollup/plugin-graphql";

export default defineConfig({
  plugins: [graphql(), tailwindcss(), reactRouter(), tsconfigPaths(), relay],
  ssr: {
    noExternal: [/^relay-runtime(?:\/|$)/, /react-relay(?:\/|$)/],
    optimizeDeps: {
      include: [
        "relay-runtime",
        "relay-runtime/experimental",
        "react-relay",
        "react",
        "react-dom",
        "react/jsx-runtime",
      ],
    },
  },
  optimizeDeps: {
    include: [
      "relay-runtime",
      "relay-runtime/experimental",
      "react-relay",
      "react",
      "react-dom",
      "react/jsx-runtime",
    ],
  },
});

Also even with that config I was getting the following errors when my react-router app's root.tsx wasn't correctly setup:

This one on the frontend:

Unexpected Server Error

TypeError: Cannot read properties of null (reading 'useMemo')

This one in the terminal's vite output:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the
 following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useMemo')
    at useMemo (/home/shared/work/open-source/vite-relay-react-router/react-ts/node_modules/.vite/deps_ssr/chunk-CZEWKRNN.js?v=30
e3dc33:1368:29)
    at RelayEnvironmentProvider (/home/shared/work/open-source/vite-relay-react-router/react-ts/node_modules/.vite/deps_ssr/react
-relay.js?v=30e3dc33:2052:21)
    at renderWithHooks

Once that had happened I needed to be sure to move my RelayEnviromentProvider from the root.tsx from the Layout component to the App component. Like so:

app/root.tsx

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return (
    <RelayEnvironmentProvider environment={RelayEnvironment}>
      <Outlet />;
    </RelayEnvironmentProvider>
  );
}

I was getting so many different errors which I'll post for searchability of the issue. Most of them were fixed by the vite.config.ts. The one about useMemo was fixed by making sure the layout didn't have any hooks in it:

[vite] Internal server error: require is not defined

[vite] Internal server error: module is not defined

TypeError: Cannot read properties of null (reading 'useMemo')

[vite] Named export 'RelayEnvironmentProvider' not found. The requested module 'react-relay' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react-relay';
const {RelayEnvironmentProvider} = pkg;

ArturGraefenstein · 2025-05-27T10:32:08Z

ArturGraefenstein
May 27, 2025

It dosent work for me. Cloned the repo and followed your readme but getting Cannot read properties of null (reading 'useContext')
Also I`m not sure it will fetch the query on server-side. You just defined the relay hook in your client side. Or am I wrong?

3 replies

ArturGraefenstein May 27, 2025

hm it worked after restarting the dev command. Tried to reproduce and it confirmed that after clone the first npm run dev fails.

johnsonjo4531 May 28, 2025
Author

@ArturGraefenstein Hey thanks for this comment I had no idea anything was wrong with it. I have now pushed a fix to the original repo linked above that should fix it even on its first start. (I just had to run a few things first before the dev command using the predev command and that is what fixed it.)

hm it worked after restarting the dev command. Tried to reproduce and it confirmed that after clone the first npm run dev fails.

It seems a little strange but I confirmed it too. It seemed to only happen on the first time you ever load the page from cloning the repo, so even a refresh of the page fixed it. It also happened every time you wiped out the .react-router directory and restarted dev.

Also I`m not sure it will fetch the query on server-side. You just defined the relay hook in your client side. Or am I wrong?

You are correct. This has no server side, so you wouldn't use the code in the RelayEnvironment.ts file directly (or at least not as it is) as it uses a computeGraphql function which is all client side (it still is graphql it just runs on the client). The main items you should be looking at to get this to work in your project are the vite.config.ts and the app/root.tsx, everything else like the src/RelayEnvironment.ts should come your current setup or from the relay tutorial something more like a fetch to your graphql server would be a better src/RelayEnvironment.ts:

src/RelayEnvironment.ts

import { Environment, Network, FetchFunction } from "relay-runtime";

// Change this endpoint to your graphql server's endpoint!
const HTTP_ENDPOINT = "https://graphql.org/graphql/";

const fetchGraphQL: FetchFunction = async (request, variables) => {
  const resp = await fetch(HTTP_ENDPOINT, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ query: request.text, variables }),
  });
  if (!resp.ok) {
    throw new Error("Response failed.");
  }
  return await resp.json();
};

export const RelayEnvironment = new Environment({
  network: Network.create(fetchGraphQL),
});

Feel free to reach out here if you need more help, thanks!

ArturGraefenstein May 28, 2025

Thx for the fix @johnsonjo4531!
Yeah I was looking for a way to fetch the first query on the server to optimize the first meaningful paint.
Found this repo helpful too: https://github.com/dantrain/remix-relay

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Setting up relay (graphql) and react-router v7 framework mode #13085

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Setting up relay (graphql) and react-router v7 framework mode #13085

Uh oh!

johnsonjo4531 Feb 21, 2025

Replies: 1 comment · 3 replies

Uh oh!

ArturGraefenstein May 27, 2025

Uh oh!

ArturGraefenstein May 27, 2025

Uh oh!

johnsonjo4531 May 28, 2025 Author

Uh oh!

ArturGraefenstein May 28, 2025

johnsonjo4531
Feb 21, 2025

Replies: 1 comment 3 replies

ArturGraefenstein
May 27, 2025

johnsonjo4531 May 28, 2025
Author