简介
tsxgql 是一种用于前端项目中的 GraphQL 客户端类型安全生成器。
它通过编写 .graphql 文件来创建一个代码生成器，用来构建完全类型安全的 GraphQL 客户端。它将会根据 .graphql 文件生成一个 TypeScript 模块，该模块包含了该 GraphQL 服务器中定义的所有查询、变量和响应的 TypeScript 类型。
安装
首先，你需要有一个 Node.js 开发环境。
然后，在终端中运行以下命令来全局安装 tsxgql：
npm install -g tsxgql
使用
创建一个 .graphql 文件：
query GetUser($id: ID!) {
user(id: $id) {
id
email
firstName
lastName
}
}在终端中运行以下命令：
tsxgql schema.graphql --namespace MyGraphQLClient --output src/generated/graphql.ts --react-hooks
上述命令将会生成 src/generated/graphql.ts 文件夹以及 MyGraphQLClient 命名空间。
变量
生成器将会为 Query 处理所有变量类型，并根据 .graphql 文件自动补全。例如，使用上述命令，会在 GetUserQueryVariables 类型中创建一个 id 属性。
interface GetUserQueryVariables {
id: string;
}返回数据
对于返回的数据，tsxgql 将会根据 .graphql 文件自动生成极其详尽的类型。例如，使用上述命令，会在查询返回的类型中创建一个 data 属性。
-- -------------------- ---- -------
--------- ------------ -
----- -
----- -
--- -------
------ -------
---------- -------
--------- -------
-
-
-发送请求
你需要一个 GraphQL 客户端来执行请求。常见的是使用 Apollo 或者 Relay，但是你也可以使用浏览器自带的 fetch 函数发送请求。使用 Apollo 作为客户端支持 autogeneration。
-- -------------------- ---- -------
------ - ------------- ------------- - ---- -----------------
------ - ---------------- ------------- --------------------- - ---- ----------------------
----- ------ - --- --------------
---- ------------------------------------
------ --- ----------------
---
----- -------- ----------- ------- -
----- - ---- - - ----- -------------------------- ------------------------
------ ----------------
---------- - -- --
---
------ ----------
-后续学习
例如，你想显示多个用户并可以对其进行排序或过滤。这就需要一个更高级别的 GraphQL 查询。tsxgql 可以为 GraphQL 接口生成类型，以便生成更高级别的查询。
结论
在本文，我们学习了如何快速上手 tsxgql，如何为变量和返回数据生成类型，并如何发送请求。tsxgql 对于构建前端 GraphQL 客户端非常有用。它将大大提高生产力，因为它自动为您处理所有类型和查询。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006737a890c4f727758415f