nitrogql 使用教程

nitrogql 使用教程

nitrogql GraphQL + TypeScript toolchain 项目地址: https://gitcode.com/gh_mirrors/ni/nitrogql

1. 项目介绍

nitrogql 是一个用于在 TypeScript 项目中使用 GraphQL 的工具链。它主要提供以下功能：

• 类型生成与源映射支持：nitrogql 能够为你的 GraphQL 模式和查询生成 TypeScript 类型，并生成一个源映射文件，将生成的类型映射回原始的 GraphQL 模式和查询。通过源映射，你可以在 IDE 中直接跳转到原始代码，而不会看到生成的代码。
• 静态检查：nitrogql 可以静态检查你的 GraphQL 代码，防止因类型不匹配导致的运行时错误。

2. 项目快速启动

安装

首先，使用 npm 安装 nitrogql CLI：

npm install --save-dev @nitrogql/cli

使用

安装完成后，你可以使用 nitrogql 命令来检查 GraphQL 文件并生成类型。以下是一个简单的示例：

nitrogql check --schema schema.graphql --documents query.graphql

前端项目配置

如果你在基于 webpack 的项目中使用 nitrogql，需要安装相应的加载器：

npm install --save-dev @nitrogql/graphql-loader

对于基于 Rollup 的项目，则需要安装 Rollup 插件：

npm install --save-dev @nitrogql/rollup-plugin

3. 应用案例和最佳实践

应用案例

假设你有一个简单的 GraphQL 查询，如下所示：

query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}

你可以使用 nitrogql 生成相应的 TypeScript 类型：

nitrogql generate --schema schema.graphql --documents query.graphql

生成的 TypeScript 类型将帮助你在代码中更好地处理 GraphQL 查询结果。

最佳实践

• 使用源映射：通过源映射，你可以在 IDE 中直接跳转到原始的 GraphQL 代码，提高开发效率。
• 静态检查：在开发过程中，定期使用 nitrogql 进行静态检查，确保你的 GraphQL 代码没有类型错误。

4. 典型生态项目

nitrogql 可以与以下生态项目结合使用：

• GraphQL Code Generator：nitrogql 旨在成为 GraphQL Code Generator 的一个优秀替代品。如果你已经在使用 GraphQL Code Generator，可以尝试使用 nitrogql 来替代。
• TypeScript：nitrogql 生成的类型可以直接在 TypeScript 项目中使用，提供更好的类型安全性和开发体验。
• Webpack 和 Rollup：通过安装相应的加载器或插件，nitrogql 可以与 Webpack 和 Rollup 等构建工具无缝集成。

通过以上步骤，你可以快速上手并使用 nitrogql 在 TypeScript 项目中集成 GraphQL。

nitrogql GraphQL + TypeScript toolchain 项目地址: https://gitcode.com/gh_mirrors/ni/nitrogql