GraphQL: Rakkit과 함께 TypeScript 및 데코레이터를 사용하여 API 생성

뭐?



자, 그럼 이것은 내 . 그러니 둘러보러 가보라고 조언해드릴께요😊.
그래서 여기서는 사용자 관리 시스템으로 GraphQL API를 생성하기 위해 Rakkit을 사용하여 수행할 수 있는 작업의 보다 구체적인 예를 보여드리겠습니다.

그러나 먼저 Rakkit 💾 설치



따라서 계속하려면 설치해야 하는 몇 가지 종속 항목이 있습니다.

Here, I would use apollo-server but it's also possible to install apollo-server-koa if you use Rakkit for REST and GraphQL which allows you to link contexts.



다음 명령을 실행하여 필요한 종속성을 설치하십시오.

npm i rakkit graphql @types/graphql apollo-server reflect-metadata


reflect-metadata allows us to use the decorators with TypeScript



좋습니다. 이제 프로젝트의 루트에 다음을 포함하는 tsconfig.json 파일을 생성하여 데코레이터를 활성화하도록 TypeScript를 구성하기만 하면 됩니다.

{
  "compileOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "target": "es2016",
    "noImplicitAny": false,
    "sourceMap": true,
    "outDir": "build",
    "declaration": true,
    "importHelpers": true,
    "forceConsistentCasingInFileNames": true,
    "lib": [
      "es2016",
      "esnext.asyncitable"
    ],
    "moduleResolution": "node"
  }
}


./tsconfig.json

유형의 정의 🚻



자, 그럼 User로 장식해야 할 @ObjectType() 클래스를 생성하는 것으로 시작하겠습니다.

import { ObjectType, Field } from "rakkit";
import * as Crypto from "crypto";

@ObjectType()
export class User {
  @Field()
  username: string;

  @Field()
  email: string;

  @Field()
  id: string;

  // Just to show a computed property:
  @Field(type => String)
  get flatInfos(): string {
    return [this.name, this.email, this.id].join(":");
  }

  constructor(username: string, email: string) {
    this.username = username;
    this.email = email;
    this.id = Crypto.randomBytes(16).toString("hex");
  }
}


./types/User.ts

작은 "데이터베이스"가 필요합니다 🗂



그래서 우리는 앱을 테스트하기 위해 일부 사용자와 놀아야 하므로 더 명확하게 하기 위해 사용자 인스턴스 목록을 만들겠습니다.

You can use a real database with an ORM like TypeORM for your projects



import { User } from "../types/User";

export const users = [
  new User("JohnDoe", "[email protected]"),
  new User("JaneDoe", "[email protected]"),
  new User("Ben", "[email protected]")
];


./db/users.ts

리졸버(쿼리, 돌연변이, 구독) 🚀



다음 클래스에서 쿼리/변형/구독을 정의합니다. 여기에는 간단한 CRUD와 사용자가 등록될 때 알림을 받을 구독이 포함됩니다.

import {
  Resolve,
  Query,
  Mutation,
  Subscription,
  IContext,
  Arg
} from "rakkit";
import { User } from "../types/User";
import { users } from "../db/users";

@Resolver()
export class UserResolver {
  @Query(returns => [User])
  getAllUsers() { {
    return users;
  }

  @Query({ nullable: true })
  getOneUserByName(@Arg("name") name: string): User {
    return users.find((user) => user.name ==== name);
  }

  @Mutation()
  addUser(
    // Defining the mutation arguments
    @Arg("name") name: string,
    @Arg("email") email: string,
    context: IContext
  ): User {
    const user = new User(name, email);
    users.push(user);
    // Publish the event for subscriptions with the created user
    context.gql.pubSub.publish("USER_ADDED", user);
    return user;
  }

  @Subscription({ topics: "USER_ADDED" })
  userAddedNotif(createdUser: User): User {
    // Send the created user to the client
    return createdUser;
  }
}


./resolvers/UserResolver.ts

진입점🚪



이제 애플리케이션에 대한 진입점이 필요합니다.

// It allows us to use decorators:
import "reflect-metadata";

import { Rakkit } from "rakkit";
import { ApolloServer } from "apollo-server";

async function bootstrap() {
  await Rakkit.start({
    gql: {
      // You give an array of glob string:
      resolvers: [`${__dirname}/resolvers/*Resolver.ts`]
    }
  });
  // Retrieve the GraphQL compiled schema:
  const schema = Rakkit.MetadataStorage.Gql.Schema;

  const server = new ApolloServer({
    schema
  });

  server.listen();
}

bootstrap();


./bootstrap.ts

완료되었으므로 시작하고 테스트해 봅시다! 🎉



시작하려면 TypeScript 앱을 직접 실행하기 위해 전역적으로 설치ts-node해야 합니다.

npm i -g ts-node


그런 다음 다음을 실행하십시오.

ts-node relative-path-to/bootstrap.ts


그리고 선호하는 브라우저로 http://localhost:4000으로 이동하여 GraphQL 쿼리를 만드십시오! 🔥

getAllUsers - 모든 사용자 가져오기:


getOneUserByName - 이름으로 특정 사용자 가져오기:


addUser - 사용자 추가:


userAddedNotif - 사용자 생성 이벤트 수신:


짜잔! 이 예제는 GitHub 😊에서 사용할 수 있습니다. 감사합니다!

좋은 웹페이지 즐겨찾기