GraphQL 是一种前端开发人员经常使用的查询语言，它能够将数据从服务器端动态获取。在 TypeScript 中使用 GraphQL 可以为前端开发人员提供更好的代码维护性和可读性，同时减少了因为类型错误而带来的麻烦。本文将会介绍如何在 TypeScript 中使用 GraphQL。
安装必要的包与工具
在开始使用 TypeScript 和 GraphQL 之前，我们需要先安装必要的包和工具。以下是我们所需要的工具与包：
- Node.js：我们需要这个来运行 TypeScript 和安装我们所需的包。
- npm 或者 yarn：我们可以使用任何一个来安装 TypeScript 和 GraphQL。
- TypeScript：TypeScript 是一种开源的跨平台编程语言，用于构建大型的 JavaScript 应用程序。
- graphql、graphql-tag 和 apollo-client：这些是我们构建 GraphQL 应用程序所需的核心依赖项。
npm install typescript graphql graphql-tag apollo-client
创建 TypeScript 项目
在安装完必要的工具与包之后，我们需要创建一个 TypeScript 项目。
mkdir my-graphql-project cd my-graphql-project
然后我们需要初始化一个 TypeScript 项目。
npm init -y
安装 TypeScript 的开发依赖项。
npm install --save-dev typescript
接着，我们需要创建一个 TypeScript 配置文件来配置 TypeScript 编译器。在项目根目录下，创建一个 tsconfig.json 文件。
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"sourceMap": true,
"esModuleInterop": true
}
}这个配置文件告诉 TypeScript 编译器我们希望编译成 ES6 模块，开启 source maps，以及启用 esModuleInterop 标志位。
安装 Apollo Client
在我们开始使用 GraphQL 之前，我们需要先安装 Apollo Client。
npm install --save apollo-boost react-apollo graphql
安装完成后，我们可以初始化一个 Apollo Client 。
import ApolloClient from "apollo-boost";
const client = new ApolloClient({
uri: "https://localhost:4000/graphql"
});
export default client;这里，我们初始化了一个 Apollo Client 的实例，并且设置了我们将要使用的 GraphQL API 的 URL。这个 URL 可以修改为你所使用的实际 API 的 URL。
创建 Query
下面我们来创建一个查询。我们将使用 Apollo Client 的 useQuery hook 来创建这个查询。首先，我们需要定义一个 GraphQL 查询语句。在 TypeScript 中，我们可以使用 gql 函数将字符串类型的查询语句转换成一个 GraphQL 查询语句对象。这个过程中，TypeScript 将会为我们检查查询参数的类型以及错误信息。
-- -------------------- ---- -------
------ - --- - ---- ---------------
----- --------- - ----
----- -------- -
----- -
--
----
-
-
--在这里，我们定义了一个名为 getUsers 的查询，这个查询返回了用户列表，并且包含了每个用户的 id 和 name 属性。
-- -------------------- ---- -------
------ - ----- - ---- ---------------
------ - --------- - ---- ------------
----- ----- - -- -- -
------ -
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
------------------ --- ---- -- -- -
--- --------------------
---
-----
--
--
--------
--
--在这里，我们使用 useQuery hook 来引入这个查询，并且使用 Query 组件来获取数据并渲染到页面中。
Mutation 与 Subscription
类似的，我们也可以使用 Apollo Client 来进行 Mutation 和 Subscription 操作。
Mutation 操作可以使用 useMutation hook 进行操作。我们需要定义一个 GraphQL mutation 查询语句，然后定义一个 Mutation 组件来处理请求与响应。
-- -------------------- ---- -------
------ - --- - ---- ---------------
------ - ----------- - ---- ---------------
----- -------- - ----
-------- --------------- ----------- -
-------------- ------- -
--
----
-
-
--
----- ------- - -- -- -
--- ---------- -----------------
----- --------- - ---- -- - ----------------------
------ -
-----
----------- -- -
-------------------
--------- ---------- - ------ - ----- --------------- - - ---
--------------- - ---
--
-
------ --------- -- ---------- - ------ --
------- ----------------- -------------
-------
--
--Subscription 操作可以使用 useSubscription hook 进行操作，我们可以使用 GraphQL subscription 查询语句监听数据变化。
-- -------------------- ---- -------
------ - --- - ---- ---------------
------ - --------------- - ---- ---------------
----- --------------------- - ----
------------ -
--------- -
--
----
-
-
--
----- ------- - -- -- -
----- - -------- ---- - - ---------------------------------------
-- --------- ------ -----
------ -
-----
------- ----------
----
------------------------------
-----
------
--
--结论
在 TypeScript 中使用 GraphQL 可以为我们的项目提供更好的类型检查以及更好的可读性。不论是查询、Mutation 还是 Subscription 操作，我们都可以使用 TypeScript 强大的类型系统来帮助我们检查代码错误以及提高代码可读性。
在本文中，我们介绍了如何在 TypeScript 中使用 GraphQL，希望这篇文章对你有所帮助，使你能够在前端开发中更好地使用 TypeScript 和 GraphQL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677661d46d66e0f9aa1f6f4a