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;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

Replies: 0 comments

Select a reply

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

johnsonjo4531 Feb 21, 2025

Replies: 0 comments

johnsonjo4531
Feb 21, 2025