后端Nest.js + GraphQL，前端umi，前后端联调gql

后端Nest.js + GraphQL，前端umi，前后端联调gql

由于这方便资料较少，我就简单纪录下

1. 开始生成一个Nestjs框架，参考nestjs的官网

$ npm i -g @nestjs/cli 
$ nest new project-name

2. app.module.ts

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { TypeOrmModule } from '@nestjs/typeorm';
import { ApolloDriver } from '@nestjs/apollo';
import { UserModule } from './user/user.module';
import { AppController } from './app.controller';
import { AppService } from './app.service';
@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'mysql',
      host: '127.0.0.1',
      port: 3306,
      username: 'root',
      password: '123456',
      database: 'nst',
      entities: [__dirname + '/**/*.entity{.ts,.js}'],
      synchronize: true,
    }),
    UserModule,
    GraphQLModule.forRoot({
      driver: ApolloDriver,
      autoSchemaFile: 'schema.gql'
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

3. user.resolver.ts

import { Resolver, Mutation, Args, Query } from '@nestjs/graphql';
import { UserService } from './user.service';
import { User } from './user.entity';
import { RegisterDto } from './user.dto';

@Resolver(User)
export class UserResolver {
  constructor (
    private readonly userService: UserService,
  ) { }

  @Query(() => [User!]!, { nullable: true })
  async userList(): Promise<User[]> {
    return await this.userService.finall();
  }

  @Mutation(() => User, { nullable: true, name: 'register' })
  async register(
    @Args('username') username: string, // 使用@Args接收客户端参数
    @Args('password') password: string,
  ): Promise<any> {
    return await this.userService.register(username, password);
  }


  @Mutation(() => User, { nullable: true, name: 'updateUser' })
  async updateUser(
    @Args('id') id: number,
    @Args('username') username: string,
  ): Promise<any> {
    return await this.userService.update(id, username);
  }

  @Query(() => String)
  sayHello(): string {
    return 'Hello World'
  }

4. user.service.ts

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { User } from './user.entity';
@Injectable()
export class UserService {
  constructor(
    @InjectRepository(User)
    public readonly userRepo: Repository<User>,
  ) {}


  finall(): Promise<User[]> {
    return this.userRepo.find();
  }

  async update(id, username) {
    this.userRepo.update(id, { username });
    return this.userRepo.findOneById(id);
  }

  async register(username: string, password: string)  {
    const user = this.userRepo.create({ username, password });
    return await this.userRepo.save(user);
  }
}

5. user.module.ts

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { UserResolver } from './user.resolver';
import { UserService } from './user.service';
import { User } from './user.entity';

@Module({
  imports:[TypeOrmModule.forFeature([User])],
  providers: [UserResolver, UserService],
})
export class UserModule {}

6. user.entity.ts

import { Entity, BaseEntity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn } from 'typeorm';
import { ObjectType, Field } from '@nestjs/graphql';

@ObjectType() // 在类上加上这个装饰器
@Entity('user')
export class User extends BaseEntity {
  @Field() // 需要返回的字段加上这个
  @PrimaryGeneratedColumn({
    type: 'int',
    name: 'id',
    comment: '主键id'
  })
  id: number;

  @Field()
  @Column({
    type: 'varchar',
    unique: true,
    length: 50,
    nullable: false,
    name: 'username',
  })
  username: string;

  // 这个字段不返回就不加的
  // @Field()
  @Column({
    type: 'varchar',
    length: 100,
    nullable: false,
    name: 'password',
  })
  password: string;

  @Field()
  @CreateDateColumn({
    type: 'timestamp',
    nullable: false,
    name: 'created_at',
    comment: '创建时间'
  })
  createdAt: Date;

  @Field()
  @UpdateDateColumn({
    type: 'timestamp',
    nullable: false,
    name: 'updated_at',
    comment: '更新时间',
  })
  updatedAt: Date;
}

gql语句

• 地址： http://localhost:3000/graphql

1. 创建

mutation {
  register(password: "123", username: "hpy") {
    username
  }
}

2. 查询

query {
   userList {
    username
  }
}

前端如何通过gql查询数据呢？

• 对应的gql请求
• 语句1

query {
  moduleList(current: 1, pageSize: 2) {
    list { id, title, description },
    pagination { current, pageSize, total }
  }
}

• 简单点，直接上代码

import { request } from 'umi';


export async function findAll({ current = 1, pageSize = 20 }) {
  const gql = `{ moduleList(current: ${current}, pageSize: ${pageSize}) { list { id, title, description }, pagination { current, pageSize, total } } }`;
  return request<any>('/gql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: { query: gql },
  });
}

后期考虑写一个gql builder，自动转成字符串