跳至主要內容
版本：v18.0.0

安裝

在許多情況下，安裝 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-relay 之外，您還可以將 Relay 與babel-plugin-macros 搭配使用。在安裝 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 套件使用廣泛支援的 JavaScript ES5 版本，以支援盡可能多的瀏覽器環境。

但是，Relay 期望定義現代 JavaScript 全域類型 (Map、Set、Promise、Object.assign)。如果您支援可能尚未在本機提供這些類型的舊版瀏覽器和裝置，請考慮在您的綑綁應用程式中加入全域 polyfill，例如 core-js 或 @babel/polyfill。

使用 core-js 支援舊版瀏覽器的 Relay polyfilled 環境可能如下所示

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

require('./myRelayApplication');