Deno 中使用 GraphQL Code Generator 进行代码自动生成

GraphQL 是一种用于 API 的查询语言，它允许客户端定义自己需要的数据结构，而不是由服务器返回固定的数据结构。Deno 是一个安全、稳定的 JavaScript 和 TypeScript 运行时环境，它提供了一种新的方式来编写服务器端 JavaScript 应用程序。在 Deno 中使用 GraphQL Code Generator 可以帮助我们自动生成代码，提高开发效率。

安装

首先，我们需要安装 Deno 和 GraphQL Code Generator：

# 安装 Deno
curl -fsSL https://deno.land/x/install/install.sh | sh
# 安装 GraphQL Code Generator
npm install -g graphql-code-generator

配置

我们需要创建一个 codegen.yml 文件来配置 GraphQL Code Generator。以下是一个简单的示例：

// javascriptcn.com 代码示例
overwrite: true
schema: https://api.spacex.land/graphql/
documents: 'src/**/*.graphql'
generates:
  src/generated/graphql.ts:
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo'

在这个配置文件中，我们指定了要从哪个 GraphQL API 获取模式（schema），以及要自动生成哪些文件和使用哪些插件。在本例中，我们使用了三个插件：

• typescript: 生成 TypeScript 类型定义。
• typescript-operations: 生成用于执行 GraphQL 查询的 TypeScript 类型定义。
• typescript-react-apollo: 生成用于 React 应用程序的 Apollo 客户端代码。

使用

在配置文件中指定了要生成的文件后，我们可以使用以下命令来生成代码：

gql-gen

这将会读取 codegen.yml 文件，并根据配置文件生成代码。在本例中，生成的代码将会被保存在 src/generated/graphql.ts 文件中。

现在，我们可以在我们的应用程序中使用这些生成的代码。以下是一个简单的示例：

// javascriptcn.com 代码示例
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { gql } from '@apollo/client/core';
import { GetLaunchesQuery } from './generated/graphql';

const client = new ApolloClient({
  uri: 'https://api.spacex.land/graphql/',
  cache: new InMemoryCache(),
});

client.query<GetLaunchesQuery>({
  query: gql`
    query GetLaunches {
      launches(limit: 10) {
        mission_name
        launch_date_utc
        launch_success
      }
    }
  `,
}).then(result => {
  console.log(result.data?.launches);
});

在这个示例中，我们使用 GetLaunchesQuery 类型定义了我们的查询结果。这个类型是由 GraphQL Code Generator 自动生成的，它包含了我们查询中所有字段的 TypeScript 类型定义。这使得我们可以在代码中使用类型安全的查询。

总结

在本文中，我们介绍了如何在 Deno 中使用 GraphQL Code Generator 自动生成代码。通过使用这个工具，我们可以提高开发效率，并减少手动编写模板代码的时间。希望这篇文章对你有所帮助！

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