Vite 如何配置 RelayJS ?

要在 Vite 项目中配置 RelayJS，你需要经过几个步骤来设置环境。这包括安装必要的包、配置 Babel 插件、设置 Relay 编译器，以及配置 Vite 以适应 Relay。下面是一个基本的配置示例步骤。

1. 安装必要的包

首先，你需要安装 Relay 和它的依赖项，以及一些工具来帮助你转换和编译查询。打开你的终端并运行以下命令：

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

如果你还没有安装 graphql，你也需要安装它：

sh
npm install graphql

2. 配置 Babel 插件

你需要配置 Babel 来使用 babel-plugin-relay。为此，你需要在项目根目录中创建（或更新）一个 .babelrc 文件或在 babel.config.js 中进行配置。

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

或者在 babel.config.js 中：

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

3. 设置 Relay 编译器

Relay 需要一个编译步骤来将 GraphQL 文件转换为 Relay 可以使用的文件。你可以在 package.json 中添加一个脚本来处理这个编译步骤。首先确保你有一个 GraphQL schema 文件，如果没有的话，你需要生成一个。然后，添加以下脚本：

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

运行这个脚本将会编译你在 ./src 目录下的 GraphQL 文件。

4. 配置 Vite

Vite 自动使用项目中的 Babel 配置，因此你不需要在 Vite 配置中做太多关于 Relay 的特殊设置。然而，你可能需要确保 Vite 正确处理 .graphql 或 .gql 文件。你可以通过安装一个 Vite 插件来实现这一点：

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

然后在 vite.config.js 文件中，引入和使用这个插件：

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

export default {
  plugins: [
    relay
  ],
  // ... 其他 Vite 配置
};

现在，当你运行 Vite 时，它应该能够正确处理 Relay 和你的 GraphQL 查询。

5. 编写和运行 GraphQL 查询

现在 Relay 已经配置好了，你可以开始编写 GraphQL 查询并在 React 组件中使用了。确保在开始使用之前运行了 npm run relay 来编译你的查询。

每次修改了 GraphQL 查询之后，你都需要重新运行编译器，或者使用 --watch 标志来让编译器在后台持续运行：

sh
npm run relay -- --watch

确保在你的 React 组件中按照 Relay 的模式使用 useQuery, useMutation 和其他 Relay hooks。

以上步骤应该可以帮助你开始在 Vite 项目中使用 Relay，但是请记住每个项目的需求可能有所不同。务必参考 Relay 和 Vite 的最新官方文档来适应你的具体情况。