使用 TypeScript 生成类型安全的 GraphQL 客户端-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种现代的 API 查询语言，它使得开发者可以在一个请求中获取到所需的所有数据，并且可以避免过度获取数据，减轻传输压力。使用 GraphQL 也可以使得前后端的协同变得更加简便。在前端领域中，Apollo Client 被广泛用于 GraphQL 数据管理，而在使用 Apollo Client 时，使用 TypeScript 可以有效地增强代码的可读性和可维护性。

本文将介绍如何使用 TypeScript 生成类型安全的 GraphQL 客户端。我们将使用 Apollo Client 和 GraphQL Code Generator 来自动生成客户端代码和类型定义，并通过一个具体的项目示例来进行讲解。

安装 Apollo Client 和相关配置

安装 Apollo Client 可以选择利用官网提供的脚手架工具进行快捷安装、配置。或者可以自己手动配置，通过 npm install apollo-boost react-apollo graphql-tag graphql --save 安装库文件，并进行以下代码配置：

// javascriptcn.com 代码示例
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';

const client = new ApolloClient({
  uri: '<INSERT GRAPHQL SERVER URL HERE'
});

const App = (
  <ApolloProvider client={this.client}>
    <MyComponent />
  </ApolloProvider>
);

这样我们就可以在组件中使用 react-apollo 的 Query 和 Mutation 组件了。

使用 GraphQL Code Generator 生成客户端

GraphQL Code Generator 可以根据我们提供的 GraphQL Schema 和查询文档，生成一套完整的 TypeScript 客户端。通过 Code Generator 我们可以大大提高代码质量和开发效率。

安装 Code Generator

npm install graphql-code-generator

安装客户端 GraphQL 相关的库

npm install graphql @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations

配置代码生成器

在根目录下创建一个名为 codegen.yml 的配置文件，文件路径可以自定义，但文件名必须与 yml 后缀相同。内容如下：

overwrite: true
schema: "http://localhost:4000/graphql"
documents: "**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"

其中 schema 指向的是我们的 GraphQL Schema 地址，documents 指向查询文档，生成的客户端文件位置和文件名在 generates 下的 src/generated/graphql.tsx 中指定，其中 plugins 中的 typescript 和 typescript-operations 是必须包含的。

生成客户端代码

我们需要在代码生成器的内部利用 graphql-codegen 进行代码自动化并生成相应的 TypeScript 文件。执行如下指令：

npm run generate

然后就会自动创建一个 graphql.ts 文件，包含了我们根据 Schema、graphql 查询文档自动生成的 TypeScript 客户端文件。

使用生成的客户端

在项目中使用生成的客户端非常简单，我们只需要将生成的 graphql.ts 引入进来即可，而且由于 TypeScript 的类型系统，我们还能够进行代码自动补全和面向对象编程。

// javascriptcn.com 代码示例
import * as React from 'react';
import { getPosts } from '../generated/graphql';

const MyComponent = () => {
  const { data, loading } = getPosts();

  if (loading || !data) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {data.posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

总结

使用 TypeScript 能够使我们的 GraphQL 客户端代码更加具有可读性和可维护性。利用 GraphQL Code Generator 自动生成客户端代码，可以避免重复的手动编写过程，并且确保代码的一致性和正确性。在实际项目开发中，通过以上的介绍，希望可以帮助读者提高代码效率和质量，沉淀更加丰富、优雅、易维护的前端代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654a423d7d4982a6eb4667a6