前言
GraphQL 是一种由 Facebook 开发的查询语言，可以帮助开发人员更有效地管理 API 的数据交换。相比于传统 RESTful API，GraphQL 有更好的灵活性和可扩展性，这使得它在现代 Web 应用程序中越来越受欢迎。
TypeScript 是一种由 Microsoft 开发的静态类型语言，它可以帮助开发人员更轻松地编写可维护和可扩展的代码。由于类型检查和智能提示，TypeScript 也被认为是编写可靠 Web 应用程序的有力工具。
在本文中，我们将探讨如何使用 TypeScript 编写 GraphQL 应用程序，并通过一个示例应用程序来演示这个过程。如果你对 GraphQL 和 TypeScript 不熟悉，这篇文章也可以帮助你了解这两种技术。
开始之前
在开始之前，我们需要安装一些必要的工具：
- Node.js: https://nodejs.org/
- Yarn: https://yarnpkg.com/
- GraphQL CLI: https://github.com/Urigo/graphql-cli
安装完成后，我们可以使用以下命令在命令行工具中进行验证：
node -v yarn -v graphql --version
如果以上命令可以正确输出当前版本号，则表示安装成功。
创建 GraphQL 服务器
我们首先需要创建一个新的 GraphQL 服务器，这可以通过 GraphQL CLI 非常容易地完成：
graphql create my-graphql-server
然后我们需要选择服务器模板，可以选择“Empty server”或“Using a database”。在这篇文章中，我们选择“Empty server”模板。
选择模板后，我们需要输入一些基本信息，例如项目名称、作者和描述等。完成这些步骤后，我们的 GraphQL 服务器将被创建，并包含一个空的 GraphQL schema，我们可以在其中定义我们的 GraphQL 操作。
创建 GraphQL 模型
在开始编写 GraphQL 操作之前，我们需要首先定义一个数据模型，该模型将用于描述我们将要查询和操作的数据。
在本文中，我们将使用一个简单的 TODO 数据模型，它包含一个 todo 标题和一个完成状态。
我们可以使用以下命令来创建一个新的文件夹并编写我们的数据模型：
mkdir src/models touch src/models/todo.ts
在 todo.ts 文件中，我们可以定义我们的 TODO 数据模型：
export interface Todo {
id: string,
title: string,
completed: boolean,
}在这里，我们使用 TypeScript 接口来定义我们的 TODO 数据模型，该接口包含三个属性：id、title 和 completed。id 是一个字符串，title 是一个字符串，completed 是一个布尔值，表示 TODO 是否已完成。
创建 GraphQL schema
现在我们已经定义了我们的数据模型，我们可以开始编写我们的 GraphQL schema。这个 schema 将定义我们可以在客户端中执行的 GraphQL 操作。
我们可以使用以下命令来创建一个新的文件夹并编写我们的 GraphQL schema：
mkdir src/schema touch src/schema/schema.graphqls
在 schema.graphqls 文件中，我们可以定义我们的 GraphQL schema：
-- -------------------- ---- ------- ---- ----- - ------ -------- - ---- -------- - ----------------- --------- ----- -------------- ---- ------ ------- ---------- --------- ----- -------------- ----- -------- - ---- ---- - --- --- ------ ------- ---------- -------- -
在这里，我们定义了三种不同的类型：Query、Mutation 和 Todo。
Query 类型定义了我们可以在客户端中执行的查询操作。在这里，我们定义了一个名为 todos 的查询，该查询将返回一个 Todo 类型的数组。每个 Todo 类型都包含我们在数据模型中定义的三个属性。
Mutation 类型定义了我们可以在客户端中执行的修改操作。在这里，我们定义了 createTodo、updateTodo 和 deleteTodo 三个操作。它们可以创建、更新和删除我们的 TODO 数据。
Todo 类型定义了我们的 TODO 数据模型，它包含三个属性，与我们在数据模型中定义的属性相同。
实现 GraphQL 操作
现在我们已经定义了我们的 GraphQL schema，我们可以开始实现我们的 GraphQL 操作。这些操作将使用我们之前定义的 TODO 数据模型和 GraphQL schema。
我们可以使用以下命令来创建一个新的文件夹并编写我们的 GraphQL 操作：
mkdir src/resolvers touch src/resolvers/todo.ts
在 todo.ts 文件中，我们可以定义我们的查询和修改操作：
-- -------------------- ---- -------
------ - ---- - ---- -----------------
----- ------ ------ - ---
------ ----- ------------- - -
------ -
------ --- ------ -- ------
--
--------- -
----------- --- ---- - ----- -- - ------ ------ --- ---- -- -
----- -------- ---- - -
--- --- ----------------------------
------
---------- ------
--
--------------------
------ --------
--
----------- --- ---- - --- ------ --------- -- - --- ------- ------- ------- ----------- ------- --- ---- -- -
----- ---------- ------ - -------------------- -- ------- --- ----
-- ---------- --- --- -
----- --- ----------- --- ---------
-
----- ----- ---- - -----------------
-- ------- -
---------- - ------
-
-- ---------- --- ---------- -
-------------- - ----------
-
------ -----
--
----------- --- ---- - -- -- - --- ------ --- ------- -- -
----- ---------- ------ - -------------------- -- ------- --- ----
-- ---------- --- --- -
----- --- ----------- --- ---------
-
----------------------- ---
------ -----
--
--
--在这里，我们定义了一个 todoResolvers 对象，它包含了我们的 Query 和 Mutation 操作。
Query.todos 操作返回我们的 TODO 数组。
Mutation.createTodo 操作创建一个新的 TODO，并将它添加到我们的 TODO 数组中。
Mutation.updateTodo 操作更新一个 TODO 的标题和完成状态。
Mutation.deleteTodo 操作删除一个 TODO。
启动 GraphQL 服务器
现在我们已经编写并实现了我们的 GraphQL 操作，我们可以启动我们的 GraphQL 服务器，这样我们就可以在客户端中执行这些操作。
我们可以使用以下命令启动服务器：
yarn start
在我们的 GraphQL 服务器启动后，我们可以打开我们的 GraphQL Playground，尝试执行我们定义的 GraphQL 操作。
我们可以使用以下 URL 访问 GraphQL Playground：
http://localhost:4000
编写客户端代码
现在我们已经有了一个可工作的 GraphQL 服务器，我们可以使用任何支持 GraphQL 的客户端来与它进行通信。在这里，我们将使用 Apollo Client 作为我们的 GraphQL 客户端。
我们可以使用以下命令来安装 Apollo Client：
yarn add apollo-boost react-apollo graphql-tag graphql
在我们的客户端代码中，我们需要首先定义我们的 GraphQL 操作。
-- -------------------- ---- -------
------ - --- - ---- ---------------
------ ----- --------- - ----
----- -------- -
----- -
--
-----
---------
-
-
--
------ ----- ----------- - ----
-------- ------------------ -------- -
----------------- ------- -
--
-----
---------
-
-
--
------ ----- ----------- - ----
-------- --------------- ---- ------- ------- ----------- -------- -
-------------- ---- ------ ------- ---------- ----------- -
--
-----
---------
-
-
--
------ ----- ----------- - ----
-------- --------------- ---- -
-------------- ----
-
--在这里，我们定义了 GET_TODOS、CREATE_TODO、UPDATE_TODO 和 DELETE_TODO 四个 GraphQL 操作。
GET_TODOS 操作将从服务器获取我们的所有 TODO。
CREATE_TODO 操作将创建一个新的 TODO。
UPDATE_TODO 操作将更新一个 TODO 的标题和完成状态。
DELETE_TODO 操作将删除一个 TODO。
现在我们已经定义了我们的 GraphQL 操作，我们可以编写我们的 React 组件，并使用这些操作来操作我们的 TODO 数据。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- ----------- - ---- ---------------
------ - ---------- ------------ ------------ ----------- - ---- ------------------
------ - ---- - ---- -----------------
----- -------- - -- -- -
----- - -------- ------ ---- - - ---------- ------ ------ --------------
----- ------------ - ------------- ----------- ---- ----------------
----- ------------ - ------------- ----------- ---- ----------------
----- ------------ - ------------- ----------- ------- ----------------
----- -------------- ---------------- - -------------
----- ---------------- - -- -- -
------------
---------- -
------ -------------
--
------- ------- - ----- - ---------- - -- -- -
----- - ----- -- - ------ ------ - - ----------------- ------ --------- -- -- - ------ -- --
------------------
------ ----------
----- -
------ ---------- ------------
--
---
--
---
--
----- ---------------- - ---- ------- ------- ------- ----------- -------- -- -
------------
---------- -
---
------
----------
--
---
--
----- ---------------- - ---- ------- -- -
------------
---------- -
---
--
------- ------- - ----- - ---------- - -- -- -
-- ------------ -
----- - ----- -- - ------ ------ - - ----------------- ------ --------- -- -- - ------ -- --
------------------
------ ----------
----- -
------ ----------------- -- ------- --- ----
--
---
-
--
---
--
----- --------------------- - ---- ------- ------ ------- -- -
-------------------- -------
--
----- ------------------------- - ---- ------- ---------- -------- -- -
-------------------- ---------- -----------
--
----- ------------------------ - ------- ------------------------------------ -- -
------------------------------------
--
-- --------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
-----
-------- ---------
----
--------------------- -- -
--- --------------
------ --------------- ------------------------ --------------- -- ---------------------------------- ---------------------- --
------ ----------- ------------------ --------------- -- ------------------------------ -------------------- --
------- ----------- -- ------------------------------------------
-----
---
-----
-----
------ ----------- -------------------- ----------------------------------- --
------- ------------------------------------------
------
------
--
--
------ ------- ---------在这里，我们使用了 useQuery 和 useMutation 钩子来执行我们的 GraphQL 操作。
在 TodoList 组件中，我们可以查看当前的 TODO 数据，并提供一些操作来创建、更新和删除 TODO 数据。
当创建、更新或删除一个 TODO 时，我们使用 Apollo Client 的缓存 API 来更新我们的 TODO 数据。这样可以确保应用程序的状态始终正确并同步。
结论
通过 TypeScript 和 GraphQL，我们可以创建一个灵活而可维护的 Web 应用程序。TypeScript 提供了更好的类型检查和智能提示，帮助我们编写可靠的代码。GraphQL 提供了更好的灵活性和可扩展性，使我们能够轻松地管理数据交换。
在本文中，我们使用 TypeScript 和 GraphQL 创建了一个简单的 TODO 应用程序，并使用 Apollo Client 将其连接到我们的服务器。在这个过程中，我们介绍了 TypeScript、GraphQL、Apollo Client 和其他一些常用工具。我们还提供了代码示例，帮助你更好地理解这些技术的应用。
希望这篇文章对你有所帮助，如果你有任何疑问或建议，请随时联系我们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674fe5aefbd23cf89070c052