GraphQL 是一种 API 查询语言，它定义了一种与服务器进行通信的方式。它允许客户端按其所需的方式请求数据，而不是服务器预定义的输出。GraphQL 的一大优点是在一个请求中可以包含多个资源。这是通过类型定义和查询来实现的。
@gql2ts/language-typescript 是一个 npm 包，它提供将 GraphQL 查询转换为 TypeScript 接口定义的功能。它可以生成 TypeScript 定义，使 TypeScript 可以直接与 GraphQL 通信，并且具有智能类型提示。
在本篇文章中，我将介绍如何在项目中使用 @gql2ts/language-typescript，包括配置、安装和基本用法。
安装
要安装 @gql2ts/language-typescript，请使用您的偏好的包管理器。在这个例子中，我们将使用 npm：
npm install --save-dev @gql2ts/language-typescript
配置
为了使用 @gql2ts/language-typescript，您需要为其配置一些内容。要配置它，您需要在项目的根目录中创建一个文件 .graphql-let.yml，并将以下内容添加到其中：
schema: ./src/schema.graphql
documents: ./src/**/*.graphql
generates:
./src/generated/types.ts:
plugins:
- "@gql2ts/language-typescript"这个配置文件指定了您的 schema 和 GraphQL 查询的文件夹。它还指定了目标文件，在这种情况下是 types.ts，并指定了要使用的插件。
使用
一旦您已经安装了 @gql2ts/language-typescript，并且已经配置了 .graphql-let.yml，您就可以使用它了。要使用它，请使用以下命令：
npx graphql-let
这将生成一个 types.ts 文件，这个文件包含了根据您的 GraphQL 查询生成的 TypeScript 接口定义。
在您的 TypeScript 代码中，您可以使用 types.ts 文件中定义的接口。例如：
import { Query, QueryVariables } from "./generated/types";
const query: QueryVariables = { id: 1 };
client.query<Query>({ query: QueryDocument, variables: query })
.then(result => console.log(result.data));这里我们导入了生成的 Query 接口和 QueryVariables 接口。这个例子展示了一个查询，其中使用了这两个接口。
示例代码
以下是一个完整的示例，它演示了如何使用 @gql2ts/language-typescript：
# ./src/query.graphql
query ($id: ID!) {
user(id: $id) {
id
name
email
}
}-- -------------------- ---- ------- -- -------------- ------ - ------------- ------------- - ---- ----------------- ------ - ------ -------------- - ---- -------------------- ------ - ------------- - ---- ---------- ----- ------ - --- -------------- ---- ----------- ------ --- ---------------- --- ----- ------ -------------- - - --- - -- --------------------- ------ -------------- ---------- ----- -- ------------ -- --------------------------
这个示例展示了如何使用 @gql2ts/language-typescript，使 TypeScript 可以直接与 GraphQL 通信。通过导入生成的 Query 接口和 QueryVariables 接口，我们可以在 TypeScript 中使用 GraphQL 查询。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaeb5b5cbfe1ea0610eb7