教程简介
本教程将帮助您开始使用 Relay 中最重要的和最常用的功能。为此，我们将构建一个简单的应用程序来显示新闻提要。我们将介绍
- 如何使用查询获取数据。
- 如何通过将查询分解为片段来使组件自包含。
- 如何使用连接对数据进行分页。
- 如何使用突变和更新器更新服务器上的数据。
本教程假定您对 React 有相当的了解。如果您仍然不熟悉 React，我们建议您浏览 React 教程 并使用 React 直到您对创建组件、传递道具以及使用诸如 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。
现在这些进程正在运行，您应该能够在浏览器中打开 https://127.0.0.1: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。