GraphQL 是一种用于 API 的查询语言，它提供了一种更高效，更强大的方式来获取和修改数据。它的主要优点在于：
- 可以在单个请求中获取多个资源
- 客户端可以精确地指定所需的数据
- 避免了传统 REST API 中过度获取或过度请求的问题
- 可以自动构建 API 文档和类型定义，提高开发效率
本文将介绍如何在 TypeScript 中使用 GraphQL 查询数据。
安装
首先，我们需要安装一些依赖库。以下是我们将使用的库:
- graphql: GraphQL 的核心库。
- apollo-client: 一个用于构建 GraphQL 客户端的库。
- graphql-tag: 用于解析 GraphQL 查询字符串的库。
您可以使用以下命令安装它们：
npm install graphql apollo-client graphql-tag
定义类型和查询
在使用 GraphQL 时，定义类型和查询是至关重要的。
类型定义
类型定义是 GraphQL API 中最重要的部分之一，它们定义了 API 中的所有对象和数据类型。GraphQL 使用类似于 JavaScript 的语法来定义类型。
以下是一个示例类型定义：
-- -------------------- ---- ------- ---- ---- - --- --- ----- ------- ------ ------- ------ -------- - ---- ---- - --- --- ------ ------- -------- ------- ------- ----- -
在此示例中，我们定义了两种类型：User 和 Post。User 类型具有 ID、Name、Email 和 Posts 字段，其中 Posts 属性是一个包含多个 Post 对象的数组类型。Post 类型具有 ID、Title、Content 和 Author 字段，其中 Author 属性是 User 类型。
查询定义
查询定义定义 GraphQL API 中的所有可用查询。查询由字段和参数组成。将查询解析为对 API 数据源进行网络请求的函数。
以下是示例查询定义：
-- -------------------- ---- -------
----- ------------ ---- -
-------- ---- -
--
----
-----
----- -
--
-----
-------
-
-
-在此示例中，我们定义了一个名为 getUser 的查询。它将一个名为 id 的变量作为参数传递，并返回与该 ID 相关联的用户对象。查询中的 user 字段在此上下文中指定了接口地方，它返回包含user对象的所有属性的结果，以及他的所有posts的对象。
发送查询
定义类型和查询后，我们将启用Apollo客户端,并将发送GraphQL查询到API数据源。在 TypeScript 中，我们将使用以下类型定义核心对象：
-- -------------------- ---- ------- --------- ---- - --- ------- ----- ------- ------ ------- ------ ------- - --------- ---- - --- ------- ------ ------- -------- ------- ------- ----- -
这里的类型定义对应于我们之前定义的 GraphQL 类型。
接下来，我们来创建一个 Apollo 客户端实例，并配置它用于执行查询。
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://you-api-endpoint/graphql',
cache: new InMemoryCache(),
});在此示例中，我们创建了一个 Apollo 客户端实例，并在创建期间指定了 API 端点。我们还创建了一个 InMemoryCache 实例，以缓存查询结果并减少不必要的网络请求。
现在，我们来了解如何使用客户端对象来执行查询：
-- -------------------- ---- -------
------ - --- - ---- -----------------
----- -------- - ----
----- ------------ --- -
-------- ---- -
--
----
-----
----- -
--
-----
-------
-
-
-
--
----- -------- ------------- -------- ------------- -
----- ------ - ----- --------------
------ ---------
---------- - -- --
---
------ -----------------
-
----- ---- - ----- --------------------
------------------在此示例中，我们定义了一个名为 fetchUser 的异步函数，它将单个 ID 作为参数并返回与该 ID 关联的用户对象。该函数通过调用 client.query 并传递我们之前定义的 GET_USER 查询来执行查询，并在查询中传递变量 id 作为查询参数。
结论
通过以上步骤，您应该现在已经熟悉了如何使用 TypeScript 客户端来执行 GraphQL 查询了。我们了解了 TypeScript 中定义类型和查询以及发送这些查询的基础知识。
对于学习 GraphQL & TypeScript 更深层次的知识， 我们可以掌握更复杂的类型定义和查询，以满足特定用例的要求。GraphQL 可以作为您的 API 技术栈中的主要工具，帮助您构建高级别和可扩展的应用程序。
微软的 GitHub 仓库上有图形用户界面， 极佳的 material 和 best-practices.
希望这篇文章可以帮助您开始在 TypeScript 中使用 GraphQL 的使用！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6717aa5bad1e889fe2230c07