在开发前端应用程序时，使用 GraphQL 可以帮助我们更轻松地与后端服务器进行通信。 然而，手动编写 GraphQL 查询可以很繁琐和容易出错。 幸运的是，GraphQL 类型推断可以帮助我们自动化和简化这个过程。
在本文中，我们将介绍两种不同的 GraphQL 类型推断方法：Visual Studio Code 和 Apollo。 我们也将探讨其如何提高前端开发效率，并提供示例代码以供参考。
Visual Studio Code GraphQL 类型推断
Visual Studio Code（以下简称 VS Code）是一个流行的开发工具，支持多个编程语言和框架。 它也有一个名为“GraphQL for VS Code”的插件，可以为我们提供 GraphQL 类型推断功能。
首先，我们需要在 VS Code 中安装该插件。 然后，我们打开一个包含 GraphQL 查询的文件，并开始输入它：
query {
products {
id
name
description
price
}
}一旦我们输入查询，VS Code 就会为我们提供自动补全和类型推断。 比如，当我们键入 Product 的时候，它会提示字段的名称和类型。
我们可以肯定地知道每个字段的类型以及如何结构化查询，就算我们不是完全精通 GraphQL。
Apollo GraphQL 类型推断
Apollo Client 是一个流行的 JavaScript GraphQL 客户端，可以在 React、Angular、Vue 和其他前端库中使用。 它也提供了 GraphQL 类型推断功能来帮助我们更好地与服务器进行通信。
首先，我们需要安装 Apollo Client 及其必要的依赖项。 然后，我们创建一个具有以下内容的 ProductList.vue 文件：
-- -------------------- ---- -------
----------
-----
----
--- -------------- -- --------- ------------------
-- ------------ --- -- ------------- --
-----
-----
------
-----------
--------
------ --- ---- -------------
------ - ------- - ---- ------------
------ ------- -
----- --------------
------ ---------------
------- -
--------- ------------
----- ------------------------ ---- -
--------------- ------------ ------------- -
--
----
-----
-
-
-- -
----------- -
------ -
----------- ---------------
-
-
--
-
-
---------在这里，我们定义了一个 ProductList 组件，该组件接受一个 categoryId prop。 此组件通过使用 apollo 选项定义一个名为 products 的查询，并将其结果作为一个属性挂载到组件上。
在查询中使用 $categoryId: ID! 定义一组变量，并使用 where: {categoryId: $categoryId} 来筛选产品。 我们的查询将包括产品的 id、name 和 price 字段。
Apollo Client 会根据我们的查询定义自动生成 TypeScript 类型并将它们分配给 Vue 组件的 props。 这使得我们可以确信我们使用的属性或方法是有效和正确的，同时避免手动签名 GraphQL 操作的麻烦。
结论
基于现代的开发工具和框架，GraphQL 类型推断为我们的前端开发提供了新的利益。 随着 GraphQL 的普及，我们可以期待更多的工具来帮助我们高效地开发和 debug API，使前端应用程序变得更加强大。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672eee39eedcc8a97c8b7669