使用 NestJS 和 GraphQL 构建 Web 应用程序-JavaScript中文网-JavaScript教程资源分享门户

前言

NestJS 是一个基于 Node.js 的开发框架，它融合了多种设计模式和开发最佳实践，支持使用 TypeScript 进行开发，非常适合构建大型、复杂的 Web 应用程序。GraphQL 是一种数据查询和操作语言，它可以有效地减少网络请求次数，提高 Web 应用程序的性能和可用性。

在本文中，我们将探讨如何使用 NestJS 和 GraphQL 构建 Web 应用程序。我们将使用一个简单的 Blog 应用程序作为实例，为读者演示如何快速构建一个完整的 Web 应用程序。

准备工作

在开始使用 NestJS 和 GraphQL 构建 Web 应用程序之前，我们需要做一些准备工作：

安装 Node.js 和 npm
安装 NestJS CLI
创建一个空的 NestJS 项目

以下是安装 NestJS CLI 和创建空项目的步骤：

安装 NestJS CLI

npm i -g @nestjs/cli

创建一个空的 NestJS 项目

nest new my-blog

集成 GraphQL

在创建好空的 NestJS 项目之后，我们需要添加 GraphQL 支持。以下是添加 GraphQL 支持的步骤：

安装 graphql 相关依赖：

npm install --save @nestjs/graphql graphql-tools graphql apollo-server-express

创建 GraphQL 模块

在 src 目录下创建一个新的目录 graphql，并在其中创建一个新的文件 graphql.module.ts：

// www.javascriptcn.com code example
import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql'
import { join } from 'path'

@Module({
  imports: [
    GraphQLModule.forRoot({
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      sortSchema: true,
      playground: true,
      installSubscriptionHandlers: true,
    }),
  ],
})
export class GraphqlModule {}

创建 schema.gql 文件

在 src 目录下创建一个新的文件 schema.gql，定义 GraphQL 的 schema：

type Query {
  hello: String!
}

将 GraphQL 模块添加到 AppModule

在 app.module.ts 文件中添加 GraphQL 模块：

// www.javascriptcn.com code example
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { GraphqlModule } from './graphql/graphql.module';

@Module({
  imports: [GraphqlModule],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

至此，我们已经成功集成了 GraphQL 支持。可以启动项目，并在浏览器中打开 http://localhost:3000/graphql 查看 GraphQL Playground。

实现 Blog 查询

接下来，我们将实现一个简单的 Blog 查询，返回一些静态数据。以下是实现 Blog 查询的步骤：

在 graphql 目录下创建一个新的文件 blog.resolver.ts，定义 BlogResolver：

// www.javascriptcn.com code example
import { Query, Resolver } from '@nestjs/graphql';

@Resolver()
export class BlogResolver {
  @Query(() => String)
  blog() {
    return 'This is my blog!';
  }
}

将 BlogResolver 注册到 GraphQL 模块

在 graphql 目录下的 graphql.module.ts 文件中添加 BlogResolver：

// www.javascriptcn.com code example
import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql'
import { join } from 'path'
import { BlogResolver } from './blog.resolver';

@Module({
  imports: [
    GraphQLModule.forRoot({
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      sortSchema: true,
      playground: true,
      installSubscriptionHandlers: true,
    }),
  ],
  providers: [BlogResolver],
})
export class GraphqlModule {}

修改 schema.gql 文件

在 schema.gql 文件中添加 blog 查询：

type Query {
  hello: String!
  blog: String!
}

至此，我们已经成功实现了 Blog 查询。可以在 GraphQL Playground 中执行以下查询：

query {
  blog
}

使用 TypeScript 类型定义查询

在前面的实现中，我们返回了一个字符串作为查询结果，没有使用 TypeScript 类型来定义查询。现在，我们将使用 TypeScript 类型来定义查询，以提高代码的可读性和可维护性。以下是使用 TypeScript 类型定义查询的步骤：

在 graphql 目录下创建一个新的文件 blog.dto.ts，定义 BlogDto 类型：

// www.javascriptcn.com code example
import { Field, ObjectType } from '@nestjs/graphql'

@ObjectType()
export class BlogDto {
  @Field()
  id: string;

  @Field()
  title: string;

  @Field()
  content: string;
}

修改 blog.resolver.ts 文件

在 blog.resolver.ts 文件中返回 BlogDto 类型的数据：

// www.javascriptcn.com code example
import { Query, Resolver } from '@nestjs/graphql';
import { BlogDto } from './blog.dto';

@Resolver()
export class BlogResolver {
  @Query(() => BlogDto)
  blog() {
    return {
      id: '1',
      title: 'My first blog',
      content: 'This is my first blog!',
    };
  }
}

修改 schema.gql 文件

在 schema.gql 文件中使用 BlogDto 类型定义 blog 查询：

// www.javascriptcn.com code example
type Query {
  hello: String!
  blog: BlogDto!
}

type BlogDto {
  id: String!
  title: String!
  content: String!
}

至此，我们已经成功使用 TypeScript 类型定义查询。执行以下查询：

query {
  blog {
    id
    title
    content
  }
}

结语

在本文中，我们使用 NestJS 和 GraphQL 构建了一个简单的 Blog 应用程序，演示了如何添加 GraphQL 支持、实现 Blog 查询、使用 TypeScript 类型定义查询等。希望这篇文章能够对前端开发人员学习使用 NestJS 和 GraphQL 有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d687a4a941bf7134c500b9

使用 NestJS 和 GraphQL 构建 Web 应用程序

前言

准备工作

集成 GraphQL

实现 Blog 查询

使用 TypeScript 类型定义查询

结语

接着读