👋欢迎使用带有 React 和 Apollo 的客户端 GraphQL！
此处是我们开始创建GraphQL支持的前端应用，称为Catstronauts—一个供想要探索宇宙的冒险猫咪使用的学习平台！ 😺 🚀
在整个课程中，我们将探讨在客户端上使用GraphQL的来龙去脉。在最后一课，你将拥有一个功能齐全的前端应用，可以消费来自实时 GraphQL API 的数据并显示这些数据。
先决条件
我们的应用将在后端使用 Node.js，在前段使用 React 18。我们建议使用最新版本的 Node。
概念和关键字，如import, map, async, jsx, TypeScript语法和React Hooks，在开始之际应该都是你熟悉的概念。
让我们开始！
什么是GraphQL？
让我们从本课程最重要的一个问题开始。什么是 GraphQL？
GraphQL是面向开发者的现代网页 查询语言。它转换了应用从API获取数据的方式，能够让你仅用单一查询就能准确获取所需内容，而不是从一系列REST端点拼凑响应。
它使用称为 文档的 架构来定义不同类型数据之间的关系。这些数据可以来自任何地方：REST API、WebHook以及数据库，仅举几例！当所有这些不同的 数据源在 GraphQL层后得以统一， GraphQL 架构就会成为我们 整个系统可做所有操作的唯一真理来源。
这对于前端的我们来说是个好消息：我们不再需要向许多不同的位置发出许多不同的请求了。取而代之的是，我们可以专注于我们的数据 能做什么，而不是它 存储在哪（这意味着有更多酷炫的新功能，而且速度更快！）。
我们正在构建的内容
让我们启动我们的项目，深入了解一些 GraphQL。
克隆存储库
在你选择的目录里，使用你首选的终端，克隆该应用的入门存储库
git clone https://github.com/apollographql-education/odyssey-client-side-graphql.git
注释：如果你在课程的任何时候遇到问题，请随时查看 final 分支以获取一些帮助。
项目结构
以下是文件结构
📦 odyssey-client-side-graphql┣ 📂 public┣ 📂 src┣ 📄 index.html┣ 📄 package.json┣ 📄 README.md┣ 📄 tsconfig.json┣ 📄 vite.config.ts┗ 📄 README.md
现在，在你最喜欢的 IDE 中打开存储库。我们在示例中使用的是 Visual Studio Code。
在终端窗口中，导航到项目目录的根目录并运行以下命令来安装依赖项并启动应用程序
npm install && npm start
控制台应该显示一堆输出，以及 http://127.0.0.1:3000/ 或 localhost:3000 处正在运行的应用程序的链接。你可以导航到那里，看看现在还没有多少内容渲染。
接下来
我们的应用程序已经准备就绪！让我们深入了解 GraphQL 的基础知识。
来分享你的疑问，并对这节课发表你的看法
这门课程目前处于
需要一个 GitHub 账号才能在下方发帖。还没有吗？ 在我们的 Odyssey 论坛中发帖。