vite-plugin-relay
v2.1.0
Published
A vite plugin for relay
Downloads
47,204
Readme
❤️ Special thanks to:
- @Brendonovich for general help
- @kesne for adding pnpm support
- @tobias-tengler for adding Vite 3 support
I do not actively use this project anymore, however, it will still receive periodic updates.
Usage
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!
How this plugin works
Under the hood we are invoking 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.
Common Issues
Uncaught ReferenceError: global is not defined
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>
Server Side Rendering
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;
}
Contributing
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