Add relay support to your Vite projects.

❤️ Special thanks to:

• @Brendonovich for general help
• @kesne for adding pnpm support
• @tobias-tengler for adding Vite 3 support

Follow Relay's guide on how to add Relay to your project.

⚠️ Note: Install babel-plugin-relay (>= 13.0.1) as devDependencies as instructed, but skip its configuration. vite-plugin-relay will invoke the babel plugin for you!

Add vite-plugin-relay to your devDependencies:

yarn add vite-plugin-relay -D

Add vite-plugin-relay to your Vite configuration (vite.config.ts or vite.config.js):

import { defineConfig } from "vite";
import relay from "vite-plugin-relay";

export default defineConfig({
  plugins: [..., relay],
});

Configure relay-compiler to output artifacts with export default syntax, by setting eagerEsModules to true:

{
  "relay": {
    "src": "./src",
    "schema": "./src/schema.graphql",
    "language": "typescript",
    "eagerEsModules": true,
    "exclude": ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"]
  }
}

Now your project is setup to use Relay with Vite!

Under the hood we are inovking the official babel-plugin-relay. This ensures that our plugin and babel-plugin-relay do not get out of sync over time and also reduces the maintainance costs of this project.

Since v13 babel-plugin-relay automatically gets its configuration from either the package.json, relay.config.js or relay.config.json, so our plugin also doesn't have to expose a configuration API.

If you experience this error in your browser console when using the plugin add the following define to your index.html file before importing your Javascript:

<script>
  let global = globalThis;
</script>

If you are planning to use this plugin with server side rendering you may need to define window. You could do this by putting the following snippet in your entry-server.js file.

if (typeof (window as any).global === 'undefined') {
  (window as any).global = globalThis;
}

git clone ...
pnpm i
# If you have never run Playwright run `npx playwright install` to setup your system.
cd examples/vite-3
pnpm dev

pnpm format # Do this before doing a commit