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
Warning
This plugin uses naive RegExp match instead of performing correct parsing for JavaScript. So it can fail on syntax that goes beyond the scope of a regular language. (e.g. queries in multiline comments)
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 commonjs
.
However, using CommonJS in Vite projects may require additional config to transpile, and it's not recommended to use. Consider to set eagerEsModules
to true
in your Relay config, or set module: 'esmodule'
in plugin options as you require.
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