教學導覽

本教學將引導您開始使用 Relay 中最重要和常用的功能。為此，我們將建構一個顯示新聞動態的簡單應用程式。我們將涵蓋

• 如何使用查詢提取資料。
• 如何透過將查詢分解為片段，使元件自給自足。
• 如何使用連接分頁瀏覽資料。
• 如何使用變動和更新器更新伺服器上的資料。

本教學假設您對 React 有一定的熟悉度。如果您對 React 仍然不熟悉，我們建議您瀏覽 React 教學，並使用 React，直到您能夠熟練地建立元件、傳遞 props，並使用基本的 hook (例如 useState)。本教學基於 Web，但 Relay 在 React Native 上也能正常運作。

本教學使用 TypeScript 建構，因此 基本的 TypeScript 知識 也很有幫助 — 您不需要知道宣告和匯入類型以及註釋函數以外的任何內容。Relay 也可以與 Flow 類型系統一起使用，或不使用類型系統。

資訊

重要：本教學旨在依序進行，因為練習彼此建立。您將逐步變更範例應用程式，因此如果您沒有完成先前的章節，後面的章節將沒有意義。

---

若要開始，請執行下列命令

git clone https://github.com/relayjs/relay-examples.git
cd relay-examples/newsfeed
npm install
npm run dev

這會從下載範本專案以開始，並啟動伺服器。（如果這些命令不起作用，您可能需要安裝 git 或安裝 npm。）

當您執行 npm run dev 時，會啟動數個處理程序

• 一個基於 Webpack 的 HTTP 伺服器，用於提供前端程式碼。
• 一個基本 GraphQL 伺服器，前端將會查詢以檢索資訊。
• Relay 編譯器，它會處理應用程式中的 GraphQL，並產生 Relay 在執行階段使用的其他檔案，以及表示查詢輸入和結果的 TypeScript 類型。當您儲存檔案中的變更時，它會自動重新產生。

在終端輸出中，這三個處理程序的日誌輸出會以標籤標記：黃色的 [webpack]、綠色的 [server] 和藍色的 [relay]。請留意標有 [relay] 的錯誤，因為如果您的 GraphQL 有任何錯誤，這些錯誤會很有幫助。

如果您在 [relay] 處理程序中遇到錯誤，指出：[relay] thread 'main' panicked at 'Cannot run relay in watch mode if `watchman` is not available (or explicitly disabled).'，這表示您的系統上未安裝或無法使用 watchman。若要解決此問題，您可能需要單獨安裝 watchman。安裝 watchman 後，請嘗試再次執行 npm run dev。

現在這些處理程序正在執行，您應該可以在瀏覽器中開啟 http://localhost:3000。

我們從一個顯示以 React 渲染的單則新聞動態故事的網頁開始，但該故事的資料只是硬式編碼到 React 元件中的預留位置資料。在本教學的其餘部分，我們將透過從伺服器提取資料、在多則故事上分頁，以及透過評論和按讚更新資料，使應用程式正常運作。

組成範例應用程式的檔案以這種方式佈局

• src/components — 我們將修改和使用的前端應用程式元件。其中一些重要的元件是
  • App.tsx — 最上層元件
  • Newsfeed.tsx — 一個將執行查詢以提取新聞動態故事並顯示可捲動的故事清單的元件。在本教學開始時，此元件使用硬式編碼的預留位置資料 — 我們將修改它以透過 GraphQL 和 Relay 提取資料。
  • Story.tsx — 一個顯示單則新聞動態故事的元件。
• server — 一個非常基本的 GraphQL 伺服器，用於提供範例資料
  • server/schema.graphql — GraphQL 結構描述：它指定可以透過 GraphQL 從伺服器查詢哪些資訊。

最後，您可能會想要安裝 Relay VSCode 擴充功能，以便在使用 VSCode 時獲得自動完成、錯誤和其他說明。

前往下一節以開始學習 GraphQL 和 Relay。