安装

在许多情况下，安装 Relay 最简单的方法是使用 Tobias Tengler 编写的 create-relay-app 包。与名称建议的相反，此包安装 Relay 到您的现有应用程序中。

它目前支持基于 Next、Vite 和 Create React App 的应用程序。如果您不在这些平台之一，或者它由于某种原因对您不起作用，请继续执行以下手动步骤。

要运行它，请确保您有一个干净的工作目录并运行

npm create @tobiastengler/relay-app

(或者根据您的喜好使用 yarn 或 pnpm 而不是 npm)。

完成后，它将打印一些供您遵循的“下一步”。

有关此脚本的更多详细信息，请访问其GitHub 仓库。

---

手动安装

使用 yarn 或 npm 安装 React 和 Relay

yarn add react react-dom react-relay

设置编译器

Relay 的提前编译需要Relay 编译器，您可以通过 yarn 或 npm 安装它

yarn add --dev relay-compiler

这将在您的 node_modules 文件夹中安装 bin 脚本 relay-compiler。建议通过将脚本添加到您的 package.json 文件中从 yarn/npm 脚本运行它

"scripts": {
  "relay": "relay-compiler"
}

编译器配置

创建配置文件

// relay.config.js
module.exports = {
  // ...
  // Configuration options accepted by the `relay-compiler` command-line tool and `babel-plugin-relay`.
  src: "./src",
  language: "javascript", // "javascript" | "typescript" | "flow"
  schema: "./data/schema.graphql",
  excludes: ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"],
}

此配置也可以在 package.json 文件的 "relay" 部分中指定。有关更多详细信息和配置选项，请参见：Relay 编译器配置

设置 babel-plugin-relay

Relay 需要一个 Babel 插件来将 GraphQL 转换为运行时工件

yarn add --dev babel-plugin-relay graphql

将 "relay" 添加到您的 .babelrc 文件中插件列表

{
  "plugins": [
    "relay"
  ]
}

请注意，"relay" 插件应该在其他插件或预设之前运行，以确保 graphql 模板文字被正确转换。有关此主题，请参阅 Babel 的文档。

或者，您可以使用babel-plugin-macros 而不是使用 babel-plugin-relay 来使用 Relay。在安装 babel-plugin-macros 并将其添加到您的 Babel 配置后

const graphql = require('babel-plugin-relay/macro');

运行编译器

在对应用程序文件进行编辑后，只需运行 relay 脚本即可生成新的编译工件

yarn run relay

或者，您可以传递 --watch 选项来监视源代码中的文件更改并自动重新生成编译后的工件（注意：需要安装watchman）

yarn run relay --watch

有关更多详细信息，请查看我们的Relay 编译器文档。

JavaScript 环境要求

在 NPM 上分发的 Relay 包使用广泛支持的 ES5 版本的 JavaScript 来支持尽可能多的浏览器环境。

但是，Relay 预期现代 JavaScript 全局类型（Map、Set、Promise、Object.assign）已被定义。如果您支持可能尚未原生提供这些类型的较旧浏览器和设备，请考虑在捆绑的应用程序中包含全局 polyfill，例如core-js 或@babel/polyfill。

使用core-js 支持较旧浏览器的 Relay 的 polyfill 环境可能如下所示

require('core-js/es6/map');
require('core-js/es6/set');
require('core-js/es6/promise');
require('core-js/es6/object');

require('./myRelayApplication');

---

此页面有用吗？

通过以下方式帮助我们改善网站 回答几个简短的问题.