随着前端技术的不断发展，GraphQL 作为一种新型的 API 查询语言也越来越受到前端工程师的关注。而使用 TypeScript 可以为我们带来更严谨的类型检查和更好的开发体验。本文将介绍如何在 TypeScript 中使用 GraphQL，并分享一些可能遇到的问题及解决方案。
环境准备
在开始之前，需要安装以下软件：
- TypeScript：用于将 TypeScript 编译成 JavaScript
- graphql-cli：用于生成 TypeScript 类型定义文件
- apollo-cli：用于生成 GraphQL 代码和文件
生成 GraphQL 代码和文件
首先，需要在项目根目录下创建一个 .graphqlconfig.yml 文件，用于配置 GraphQL 的项目信息。示例配置如下：
-- -------------------- ---- -------
------- -------------------------
---------- ------------------
-----------
--------
----------
--------------------------
--------
- ------------
- -----------------------
- ------------------- ------ ------------
------------------ -----其中，schema 指向 GraphQL API 的地址，documents 指定包含 GraphQL 查询和变异的文件夹路径，generated/graphql.tsx 是最终生成的 TypeScript 类型定义文件路径。
接下来，通过执行以下命令来生成代码文件和类型定义文件：
yarn apollo codegen:generate
使用生成的代码
在准备好代码后，假设我们已经有了一个 GraphQL 查询：
query GetUser($id: ID!) {
user(id: $id) {
id
name
email
}
}那么我们就可以在 TypeScript 中使用 import { GetUserDocument } from 'generated/graphql 来引入该查询，并直接在代码中使用它，例如：
-- -------------------- ---- -------
------ - -------- - ---- -----------------
------ - --------------- - ---- --------------------
-------- ------ ------ -- - ------- ------ -- -
----- - ----- ----- - - ------------------------- -
---------- - --- ------ --
---
-- ------- -
------ ------------------
-
-- ------- -
------ ----------------------
-
----- - ----- ----- - - ----------
------ -
-----
---------- ------------
----------- -------------
------
--
-在这个示例中，我们使用了 useQuery 钩子来发出该 GraphQL 查询。使用 GetUserDocument 类型定义文件以及传递给它的变量 userId，我们可以保证在编译时检查 API 的正确性和安全性。
遇到的问题及解决方案
问题：生成的 TypeScript 类型定义文件中包含 any 类型
在使用 graphql-cli 生成 TypeScript 类型定义文件时，有时会出现生成的类型定义文件中包含 any 类型的情况。这不仅违反了 TypeScript 的类型检查原则，而且也会导致代码中的潜在错误。
解决方案：需要手动更改生成的类型定义文件，将 any 类型更改为更具体的类型。例如：
// 将 `data` 的类型从 `any` 更改为包含 `user` 属性的对象类型
const { data } = useQuery(GetUserDocument) as { data: { user: { name: string, email: string } } };问题：无法在生成的 GraphQL 文件中使用 TypeScript 泛型
在生成的 GraphQL 文件中，我们有时需要使用 TypeScript 的泛型类型。但是，GraphQL 语言本身并不支持 TypeScript 的泛型语法，这会导致一个错误。
解决方案：GraphQL API 中使用反射技术，创建自定义修饰符，然后在 TypeScript 中与自定义修饰符协同使用，以实现泛型型式的支持。
总结
本文介绍了在 TypeScript 中使用 GraphQL 的方法，并解决了一些可能遇到的问题。通过使用 TypeScript，我们可以在编译时捕获许多 API 的问题，并通过正确的类型定义来确保代码安全和正确性。当然，这只是刚刚开始，我们可以探索更多 TypeScript 和 GraphQL 的潜能。感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485d72b48841e989448c33c