| id | babel-plugin | |
|---|---|---|
| title | Relay Babel Plugin | |
| slug | /getting-started/babel-plugin/ | |
| description | Setting up Relay's Babel plugin | |
| keywords |
|
Relay requires a Babel plugin to convert GraphQL to compiler-generated runtime artifacts. Depending upon what framework/bundler you are using, there may be a framework-specific plugin you can use:
- Vite: vite-plugin-relay
- Next.js: Relay config option
- SWC: @swc/plugin-relay
If not, you can install the Babel plugin manually:
yarn add --dev babel-plugin-relay graphqlAdd "relay" to the list of plugins in your .babelrc file:
{
"plugins": ["relay"]
}Please note that the "relay" plugin should run before other plugins or presets to ensure the graphql template literals are correctly transformed. See Babel's documentation on this topic.