👋 欢迎参加升空 4！
很高兴看到你参加升空第 4 部分！我们的 Catstronauts 应用程序已经付出了巨大的努力，在服务器和客户端都深入研究了 GraphQL
到目前为止，我们只处理了从中获取数据的 API。现在是时候切换齿轮，使用 GraphQL 变更修改我们的数据
我们的应用程序中的每个音轨都显示了它的观看次数。每次用户从主页访问音轨页面时，我们都希望增加这个数字。
为此，我们将更新架构以包含 突变，学习突变响应的最佳实践。我们将编写 解析器来处理成功的响应和错误。最后在客户端，我们将使用名为 useMutation的 React 挂钩，以此向 GraphQL 服务器发送请求。
点火序列...
先决条件
我们的应用程序在后端使用 Node.js，在前端使用 React。我们建议使用最新版本的 Node。
克隆储存库
注意：本课程同时提供 JavaScript 和 TypeScript 版本。在继续之前，在课程顶部确认你选择使用的是哪种语言。
在你选定的目录中，使用你首选的终端，克隆应用程序的 starter 储存库
git clone https://github.com/apollographql/odyssey-lift-off-part4
项目结构
此储存库从升空 III 结束的地方继续。我们的项目是一个全栈应用程序，其中后端应用程序位于 server/目录中，而前端应用程序位于 client/目录中。
你还会找到一个 final/文件夹，其中包含在完成课程后项目的最终状态。请随意将其用作参考！
以下是文件结构
📦 odyssey-lift-off-part4┣ 📂 client┃ ┣ 📂 public┃ ┣ 📂 src┃ ┣ 📄 index.html┃ ┣ 📄 package.json┃ ┣ 📄 README.md┃ ┣ 📄 vite.config.js┣ 📂 server┃ ┣ 📂 src┃ ┃ ┣ 📂 datasources┃ ┃ ┃┣ 📄 track-api.js┃ ┃ ┣ 📄 index.js┃ ┃ ┣ 📄 schema.js┃ ┃ ┣ 📄 resolvers.js┃ ┣ 📄 README.md┃ ┣ 📄 package.json┣ 📂 final┃ ┣ 📂 client┃ ┣ 📂 server┗ 📄 README.md
现在，在你最喜欢的 IDE 中打开储存库。
让我们从服务器应用程序开始。
在终端窗口中，导航到储存库的 server目录，并运行以下命令以安装依赖关系并运行应用程序：
npm install && npm start
注意：我们建议使用最新版本的 LTS Node。要检查你的 Node 版本，请运行 node -v。
如果顺利的话，你会看到安装已完成，控制台中会显示一条消息，表明服务器正在运行。
接下来，安装客户端应用。
在新的终端窗口导航到此存储库的 client 目录并运行以下命令来安装依赖项并启动应用：
npm install && npm start
控制台会显示许多输出以及一个链接，显示正在运行的应用，地址为 http://127.0.0.1:3000/，或 localhost:3000。你可以导航到 https://127.0.0.1:3000 并在浏览器中看到我们的主页，它显示多个曲目卡片。
设置 Explorer
要编写我们的查询，我们将使用 Explorer 页面 Apollo Sandbox。Explorer 免费使用，它提供了强大的开发功能，例如交互式 查询 构建、查询历史记录和响应提示。这将使我们构建查询变得快速有趣。
要在 Apollo Sandbox 中打开 Explorer，你可以 cmd + 单击 终端中 URL（来自启动服务器），在浏览器中打开它，或者你可以在这里打开它： https://127.0.0.1:4000。
让我们开始吧！
分享你对此课程的问题和评论
您的反馈可以帮助我们改进！如果您卡住了或感到困惑，请告诉我们，我们会帮助您。所有评论都是公开的，必须遵循 Apollo 行为准则。请注意，已解决或已处理的评论可能会被删除。
您需要一个 GitHub 帐户才能在下面发帖。还没有帐户？ 改为在我们的 Odyssey 论坛中发帖。