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 😊에서 사용할 수 있습니다. 감사합니다!
Reference
이 문제에 관하여(GraphQL: Rakkit과 함께 TypeScript 및 데코레이터를 사용하여 API 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/daven/graphql-create-your-api-using-typescript-and-decorators-with-rakkit-2koo
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
따라서 계속하려면 설치해야 하는 몇 가지 종속 항목이 있습니다.
Here, I would use
apollo-server
but it's also possible to installapollo-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 😊에서 사용할 수 있습니다. 감사합니다!
Reference
이 문제에 관하여(GraphQL: Rakkit과 함께 TypeScript 및 데코레이터를 사용하여 API 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/daven/graphql-create-your-api-using-typescript-and-decorators-with-rakkit-2koo
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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");
}
}
그래서 우리는 앱을 테스트하기 위해 일부 사용자와 놀아야 하므로 더 명확하게 하기 위해 사용자 인스턴스 목록을 만들겠습니다.
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 😊에서 사용할 수 있습니다. 감사합니다!
Reference
이 문제에 관하여(GraphQL: Rakkit과 함께 TypeScript 및 데코레이터를 사용하여 API 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/daven/graphql-create-your-api-using-typescript-and-decorators-with-rakkit-2koo
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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;
}
}
이제 애플리케이션에 대한 진입점이 필요합니다.
// 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 😊에서 사용할 수 있습니다. 감사합니다!
Reference
이 문제에 관하여(GraphQL: Rakkit과 함께 TypeScript 및 데코레이터를 사용하여 API 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/daven/graphql-create-your-api-using-typescript-and-decorators-with-rakkit-2koo
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
npm i -g ts-node
ts-node relative-path-to/bootstrap.ts
Reference
이 문제에 관하여(GraphQL: Rakkit과 함께 TypeScript 및 데코레이터를 사용하여 API 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/daven/graphql-create-your-api-using-typescript-and-decorators-with-rakkit-2koo텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)