👋 很高兴您来到本系列升空课程的第三部分！
到目前为止，我们已经为我们的 Catstronauts 应用程序构建了一个主页，其中包含了面向有抱负的猫太空探险家的学习轨道。我们密切遵循一个GraphQL 查询 从客户端到服务器再返回的旅程，我们还设置了 解析器 从 REST 数据源 获取实时数据。
在本课程中，我们将向我们的 Catstronauts 应用程序添加第二个功能：我们希望用户能够单击主页上的轨道卡，导航到一个页面，该页面显示有关该特定轨道的更多详细信息。
为此，我们将学习如何使用 查询 单个轨道 GraphQL 参数。我们将继续应用我们的模式优先方法，同时向模式的类型和 字段 添加内容。然后我们将更新我们的 解析器 和 数据源 以进行相应调整。最后，我们将进入前端，使用 GraphQL 变量 发送我们的查询，并将添加页面导航来将所有内容联系在一起。
点火序列...
先决条件
注意：在本课程中，我们使用的是 Apollo Server 3。如果您需要 参考 Apollo 文档，请确保您使用的是 v3 文档集！
克隆存储库
在您选择的目录中使用您喜欢的终端克隆应用程序的启动存储库
git clone -b v1 https://github.com/apollographql/odyssey-lift-off-part3
注意： git clone 上面的命令可能与您习惯的命令略有不同。本课程使用 v1 版本的启动代码库。 单击此处访问本课程的最新版本。
项目结构
此存储库延续了升空 II 中的内容。回顾一下，我们的项目是一个全栈应用程序，后端应用程序位于 server/ 目录中，前端应用程序位于 client/ 目录中。
您还会发现一个 final/ 文件夹，其中包含您完成本课程后项目的最终状态。您可以将其用作指南！
这是文件结构
📦 odyssey-lift-off-part3┣ 📂 client┃ ┣ 📂 public┃ ┣ 📂 src┃ ┣ 📄 README.md┃ ┣ 📄 package.json┣ 📂 server┃ ┣ 📂 src┃ ┃ ┣ 📂 datasources┃ ┃ ┃┣ 📄 track-api.js┃ ┃ ┣ 📄 index.js┃ ┃ ┣ 📄 schema.js┃ ┃ ┣ 📄 resolvers.js┃ ┣ 📄 README.md┃ ┣ 📄 package.json┣ 📂 final┃ ┣ 📂 client┃ ┣ 📂 server┗ 📄 README.md
现在，在您喜欢的 IDE 中打开存储库。
注意： 本课程中的示例使用 npm，但如果您愿意，也可以使用 yarn。
让我们从服务器应用程序开始。
在终端窗口中，导航到存储库的 server 目录，并运行以下命令来安装依赖项并运行应用程序：
npm install && npm start
如果一切顺利，您将看到安装完成，并且控制台中会显示一条消息，指示服务器正在运行。
接下来，是客户端应用程序。
在新的终端窗口中，导航到存储库的 client 目录，并运行以下命令来安装依赖项并启动应用程序：
npm install && npm start
控制台应该显示大量输出和一个指向正在运行的应用程序的链接，地址为 localhost:3000。您可以在浏览器中导航到 https://127.0.0.1:3000，并看到我们的主页，其中显示了多个轨道卡。
设置资源管理器
要编写我们的查询，我们将使用 资源管理器 页面，它位于 Apollo Sandbox 中。资源管理器可以免费使用，它提供了出色的开发功能，例如交互式 查询 生成、查询历史记录和响应提示。这将使构建我们的查询变得快速而有趣。
要打开 Apollo Sandbox 中的资源管理器，您可以在终端中 cmd+单击 终端中运行服务器的 URL（从启动服务器开始），或者您也可以在这里打开它： https://127.0.0.1:4000。
在浏览器中，我们可以看到我们的服务器正在成功运行，并显示一条消息，邀请我们 查询 它。让我们点击 查询您的服务器 来查看我们的 图表 在 Apollo Sandbox 中的实际应用。
准备好享受乐趣了吗？让我们开始吧！
分享您对本课的疑问和评论
您的反馈有助于我们改进！如果您遇到困难或困惑，请告诉我们，我们会帮助您。所有评论都是公开的，必须遵守 Apollo 行为准则。请注意，已解决或已解决的评论可能会被删除。
您需要一个 GitHub 帐户才能在下面发布。没有帐户？ 请在我们的奥德赛论坛中发布。