👋 欢迎来到使用 TypeScript 入门 GraphQL!
您的GraphQL 旅程从现在开始!准备好出发了吗?
在本系列中,我们将从头开始,使用 REST API 构建一个功能齐全的 GraphQL 服务器。
在本课中,我们将
- 了解我们要构建的内容以及帮助我们构建它的技术
- 设置我们的项目环境
什么是 GraphQL?
让我们从课程中最重要的一个问题开始。什么是 GraphQL?
GraphQL 是现代 Web 的开发者友好型 查询 语言。它改变了应用程序从 API 获取数据的方式,使您可以通过单个查询获得所需的确切数据,而不是处理来自 REST 端点拼凑的响应。
以强类型模式为核心,GraphQL 帮助您定义跨越任意数量系统的不同数据之间的关系,使您能够专注于数据的功能而不是存储位置。
在本课程中,我们将学习 GraphQL 如何融入我们现有的架构,以及它如何与现有的 REST API 和其他 数据源 一起工作。我们将学习如何使用查询、变异、参数、模式和 解析器 在我们的 GraphQL API 中。准备好卷起袖子,编写代码,测试您的理解,并构建一些很酷的东西!
先决条件
要继续学习...
- 您应该熟悉基本的 TypeScript 编程概念。
- 您需要安装 Node(我们建议使用 最新版本)以及 IDE(我们使用 Visual Studio Code)。
- 概念和关键字,例如
import
、map
和async
在开始之前应该熟悉。
我们要构建的内容
想预订去广阔宇宙中新奇、激动人心、有时是虚构的地方旅行吗?加入 气闸!
使用气闸,您可以找到符合您选择日期和所需床位数量的房源。了解每个地方的概况以及它提供的便利设施,如果您有兴趣,您可以一键预订住宿(前提是您的钱包中有足够的太空积分!)。
对于气闸 API 的第一次迭代,我们将专注于 房源:展示特色星际位置,详细介绍其功能和便利设施,并添加新的房源。在未来的课程中,我们将使用 GraphQL Federation 来扩展我们的 API。
克隆存储库
在您选择的目录中使用您喜欢的终端克隆应用程序的入门存储库
git clone https://github.com/apollographql-education/odyssey-intro-typescript.git
注意: 如果您在课程中的任何时候遇到困难,请随时查看 final
分支以获得帮助。
项目结构
我们的项目已经包含了我们开始并运行服务器所需的文件,但我们将主要在下面突出显示的 src
包中进行操作。
📦 odyssey-intro-typescript┣ 📂 src┃ ┣ 📄 graphql.d.ts┃ ┣ 📄 helpers.ts┃ ┗ 📄 index.ts┣ 📄 package.json┣ 📄 README.md┗ 📄 tsconfig.json
上面显示的 graphql.d.ts
文件是类型定义文件。您不需要对它进行任何操作;它存在是为了让我们的 TypeScript 项目了解 .graphql
文件在下一课中创建时的样子!
现在,在您喜欢的 IDE 中打开存储库。(我们使用 Visual Studio Code!)
让我们构建并运行应用程序
在终端中,导航到目录的根目录并运行以下命令。
npm install && npm run dev
注意:我们建议使用最新的 LTS 版本的 Node。要检查您的 Node 版本,请运行 node -v
。
如果一切顺利,您将看到您的安装完成,并且一条消息显示 ts-node-dev
正在等待您对 ./src/index.ts
文件的更改。这里没有其他需要做的,因为我们还没有任何代码可以运行 ts-node-dev
。
让我们开始吧!
主要要点
- GraphQL 使得能够通过单个 查询 精确地检索数据,从而消除了在客户端应用程序端导航多个 REST 端点的需要。
- GraphQL 使我们能够通过描述数据来构建 API,以 对象类型(节点)和关系(边)的形式。
接下来
这就是 GraphQL 的组成部分,但我们还需要讨论它是如何工作的。在下一课中,我们将深入了解基础知识,并跟踪 GraphQL 操作 的旅程。
分享您关于本课的疑问和评论
本课程目前处于
您需要一个 GitHub 帐户才能在下面发帖。没有吗? 改为在我们奥德赛论坛上发帖。