How to configure Relay.JS in Vite?

To configure Relay.js in a Vite project, you need to follow several steps to set up the environment. This includes installing necessary packages, configuring Babel plugins, setting up the Relay compiler, and configuring Vite to work with Relay. Below is a basic configuration example step-by-step.

1. Install Necessary Packages

First, you need to install Relay and its dependencies, as well as tools to help transform and compile GraphQL queries. Open your terminal and run the following command:

sh
npm install react-relay relay-runtime relay-compiler babel-plugin-relay

If you haven't installed graphql, you also need to install it:

sh
npm install graphql

2. Configure Babel Plugins

You need to configure Babel to use babel-plugin-relay. For this, create (or update) a .babelrc file or configure it in babel.config.js in the project root directory.

json
{
  "plugins": [
    "relay"
  ]
}

Or in babel.config.js:

js
module.exports = {
  plugins: [
    "relay"
  ],
};

3. Set Up Relay Compiler

Relay requires a compilation step to convert GraphQL files into Relay-compatible files. Add a script in package.json to handle this compilation. First, ensure you have a GraphQL schema file; if not, generate one. Then, add the following script:

json
"scripts": {
  "relay": "relay-compiler --src ./src --schema path/to/your/schema.graphql"
}

Running this script compiles GraphQL files in the ./src directory.

4. Configure Vite

Vite automatically uses the Babel configuration in your project, so you don't need special configurations for Relay in Vite. However, ensure Vite correctly handles .graphql or .gql files by installing a Vite plugin:

sh
npm install --save-dev vite-plugin-relay

Then in vite.config.js, import and use this plugin:

js
import relay from 'vite-plugin-relay';

export default {
  plugins: [
    relay
  ],
  // ... other Vite configuration
};

When you run Vite, it should handle Relay and your GraphQL queries correctly.

5. Write and Run GraphQL Queries

Now that Relay is configured, start writing GraphQL queries and using them in React components. Run npm run relay before compiling your queries.

After modifying GraphQL queries, re-run the compiler or use the --watch flag for continuous background compilation:

sh
npm run relay -- --watch

Ensure you use Relay hooks like useQuery, useMutation and other Relay hooks in your React components.

These steps help you get started with Relay in your Vite project, but remember requirements may vary. Be sure to refer to the latest official documentation for Relay and Vite to adapt to your specific situation.