Vite plugin for more convenient Relay experience. With no Babel dependencies!

What this plugin does for you:

• Generates artifacts on code changes
• Transform codes without Babel plugin
• Respects project's Relay config file

yarn add -D vite graphql vite-plugin-relay-lite

# Assumes the project already have relay-compiler and its configuration

// vite.config.ts

import { defineConfig } from 'vite';
import relay from 'vite-plugin-relay-lite';

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

Plugin will automatically load the Relay config file.

You can use custom config file path.

{
  plugins: [
    relay({
      relayConfig: 'path/to/relay.js'
    })
  ]
}

Or pass config object.

{
  plugins: [
    relay({
      relayConfig: {
        // ...relay config
      }
    })
  ]
}

Plugin respects the eagerEsModules option in the Relay config, so the default output format is esmodule.

The plugin also supports CommonJS outputs with eagerEsModules set to false or module: 'esmodule' in plugin options. However, using CommonJS in Vite projects may require additional config to transpile, and it's not recommended to use.

Plugin automatically runs relay-compiler before transform, so it should be installed in the project.

Or you can set the codegen option to false to disable it.

{
  plugins: [
    relay({
      codegen: false
    })
  ]
}

Plugin respects the codegenCommand option in the Relay config, it uses relay-compiler if not set.

You can set omitTagImport: true to omit import/require statements for the graphql tag.

{
  plugins: [
    relay({
      omitTagImport: true
    })
  ]
}

This might causes the Vite build to fail, allowing early detection of potential transform errors.

The compilation has ported from esbuild-plugin-relay, which was originally introduced from a gist by Samuel Cormier-Iijima

MIT