GraphQL API 与 TypeScript：面向初学者的分步教程

GraphQL 和 TypeScript 简介

GraphQL 是一种 API 查询语言，允许客户端只请求他们真正需要的数据。结合为 JavaScript 添加静态类型化的 TypeScript，您将获得一个用于创建可靠且可扩展 API 的强大工具。在本教程中，我们将逐步使用 TypeScript 创建一个简单的 GraphQL API。您将学习如何配置项目、定义模式、编写解析器以及执行查询。

本材料面向熟悉 JavaScript 基础知识并希望掌握现代技术的初学者开发者。在文章结束时，您将能够独立部署一个基本的 GraphQL 服务器。

步骤 1：项目配置

在编写代码之前，需要初始化项目并安装依赖项。我们将使用 Apollo Server——Node.js 中最流行的 GraphQL 库之一。

初始化 npm

创建一个新目录并执行初始化：

mkdir graphql-typescript-tutorialcd graphql-typescript-tutorialnpm init -y

安装依赖项

安装必要的包：

npm install apollo-server graphqlnpm install typescript ts-node @types/node --save-dev

• apollo-server — 用于处理 GraphQL 请求的服务器。
• graphql — GraphQL 语言的核心。
• typescript 和 ts-node — 用于编译和运行 TypeScript。

配置 TypeScript

在项目根目录创建 tsconfig.json 文件：

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "strict": true,    "esModuleInterop": true,    "outDir": "./dist",    "rootDir": "./src"  },  "include": ["src/**/*"],  "exclude": ["node_modules"]}

创建 src 文件夹和 index.ts 文件——服务器的主要代码将放在这里。

步骤 2：定义模式和类型

GraphQL 模式描述了哪些数据可用以及如何请求它们。在 TypeScript 中，我们将使用带有 gql 语法的字符串来定义类型。

基本模式

打开 src/index.ts 并添加以下代码：

import { ApolloServer, gql } from 'apollo-server';

const typeDefs = gql`  type Book {    id: ID!    title: String!    author: String!  }

  type Query {    books: [Book]    book(id: ID!): Book  }`;

这里我们定义了一个 Book 类型，包含 id、title 和 author 字段。Query 包含两个查询：获取所有书籍和根据 ID 获取单本书籍。

模拟数据

为了测试，我们添加一个书籍数组：

const books = [  { id: '1', title: '战争与和平', author: '列夫·托尔斯泰' },  { id: '2', title: '罪与罚', author: '费奥多尔·陀思妥耶夫斯基' },];

步骤 3：编写解析器

解析器是返回模式中每个字段数据的函数。它们将模式与实际数据连接起来。

实现解析器

添加 resolvers 对象：

const resolvers = {  Query: {    books: () => books,    book: (_: any, args: { id: string }) => {      return books.find(book => book.id === args.id);    },  },};

第一个参数 _ 是父对象（此处未使用）。第二个参数 args 包含查询参数，例如 id。

构建服务器

现在创建服务器实例并启动它：

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {  console.log(`🚀 服务器已启动，地址为 ${url}`);});