1. 课程概述和设置
3m

👋 欢迎来到使用 TypeScript 入门 GraphQL!

您的 旅程从现在开始!准备好出发了吗?

在本系列中,我们将从头开始,使用 REST API 构建一个功能齐全的

在本课中,我们将

  • 了解我们要构建的内容以及帮助我们构建它的技术
  • 设置我们的项目环境

什么是 GraphQL?

让我们从课程中最重要的一个问题开始。什么是 GraphQL

是现代 Web 的开发者友好型 语言。它改变了应用程序从 API 获取数据的方式,使您可以通过单个查询获得所需的确切数据,而不是处理来自 REST 端点拼凑的响应。

以强类型模式为核心, 帮助您定义跨越任意数量系统的不同数据之间的关系,使您能够专注于数据的功能而不是存储位置。

在本课程中,我们将学习 如何融入我们现有的架构,以及它如何与现有的 REST API 和其他 一起工作。我们将学习如何使用查询、、模式和 在我们的 GraphQL API 中。准备好卷起袖子,编写代码,测试您的理解,并构建一些很酷的东西!

A diagram showing GraphQL as the contact point between multiple clients and the complex architecture of a modern backend

先决条件

要继续学习...

  • 您应该熟悉基本的 TypeScript 编程概念
  • 您需要安装 Node(我们建议使用 最新版本)以及 IDE(我们使用 Visual Studio Code)。
  • 概念和关键字,例如importmapasync 在开始之前应该熟悉。

我们要构建的内容

想预订去广阔宇宙中新奇、激动人心、有时是虚构的地方旅行吗?加入 气闸

The Airlock app homepage with a list of places to book.

使用气闸,您可以找到符合您选择日期和所需床位数量的房源。了解每个地方的概况以及它提供的便利设施,如果您有兴趣,您可以一键预订住宿(前提是您的钱包中有足够的太空积分!)。

对于气闸 API 的第一次迭代,我们将专注于 房源:展示特色星际位置,详细介绍其功能和便利设施,并添加新的房源。在未来的课程中,我们将使用 来扩展我们的 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

任务!

让我们开始吧!

主要要点

  • 使得能够通过单个 精确地检索数据,从而消除了在客户端应用程序端导航多个 REST 端点的需要。
  • 使我们能够通过描述数据来构建 API,以 (节点)和关系(边)的形式。

接下来

这就是 的组成部分,但我们还需要讨论它是如何工作的。在下一课中,我们将深入了解基础知识,并跟踪 GraphQL 的旅程。

下一步

分享您关于本课的疑问和评论

本课程目前处于

测试版
.您的反馈意见有助于我们改进!如果您遇到困难或困惑,请告诉我们,我们会帮助您。所有评论都是公开的,必须遵循 Apollo 行为准则。请注意,已解决或已处理的评论可能会被删除。

您需要一个 GitHub 帐户才能在下面发帖。没有吗? 改为在我们奥德赛论坛上发帖。