React 및 GraphQL - 02를 사용하여 Reddit 클론 만들기

이것은 일련의 게시물이며 이전 게시물은 여기에서 찾을 수 있습니다.

Learning React with Ben Awad — 01

Note:

use yarn watch to build the JavaScript files.

use yarn devto run with nodemon .

All these commands set up on package.json file.

이전 게시물의 이 시점에서 데이터베이스를 설정했습니다. 즉, 데이터베이스에 데이터를 성공적으로 추가할 수 있습니다. 하지만 여기서는 GraphQL  를 사용합니다. 이제 프로젝트에 QraphQL를 설정해 보겠습니다. 또한 현재 백엔드 웹 서비스를 구축하고 있습니다. 관련 패키지를 추가해 봅시다. 아래 명령을 사용하여 express 웹 프레임워크를 추가하고, apollo-server-express로 서버를 표현하기 위한 GraphQL 지원 및 graphql로 GraphQL을, Schemas에서 생성하기 위한 TypeScript 지원type-graphql을 사용하십시오.
yarn add express apollo-server-express graphql type-graphql
그런 다음 reflect-metadata 를 추가하십시오. 속성이나 주석 등을 추가할 수 있도록 지원하는 메타데이터 리플렉션 API입니다. 아래 명령을 사용하여 추가하십시오.
yarn add reflect-metadata
또한 express TypeScript 지원을 추가해야 합니다. 아래 명령어를 사용하여 추가해 봅시다.
yarn add -D @types/express
이제 우리는 서버를 만들었고 지금 가동 중입니다.

하지만 여기서는 GraphQL을 사용하고 있습니다. 그래서 ApolloServer 개체를 만들고 익스프레스 서버를 미들웨어 파이프라인으로 전달합니다. config가 무엇인지 알려주는 resolvers 객체를 추가해야 함을 확인할 수 있습니다.

const apolloServer = new ApolloServer({
  schema: await buildSchema({
    resolvers: [HelloResolver, PostResolver],
    validate: false,
  }),
  context: () => ({ em: orm.em }),
});
apolloServer.applyMiddleware({ app });

이 해석기는 GraphQL.에 대한 쿼리 처리기입니다. 여기에서 쿼리 함수와 변형 함수를 정의할 수 있습니다. 클래스를 리졸버로 정의하려면 @Resolver 주석을 사용하십시오.

@Query 주석.

쿼리이므로 정의하십시오. 반환 유형을 첫 번째 매개변수로 전달합니다. null을 반환하려면 명시적으로 정의해야 합니다.

@Query(() => Post, { nullable: true })

웹 서버를 실행하면 graphql로 플레이그라운드를 열 수 있습니다localhost:[port]/graphql.

그러나 문제는 Post가 Entity라는 것입니다. GraphQL 객체로 변환할 수 있습니다. @ObjectType() 및 @Field() 주석을 사용합니다. (아래 링크 확인)

rasikag/reddit-clone

이제 데이터베이스 컨텍스트가 필요합니다. 생성하여 @resolver 함수 매개변수로 전달할 수 있습니다. 여기에서 컨텍스트 객체를 생성합니다.

export type  RedditDbContext {
  em: EntityManager<any> & EntityManager<IDatabaseDriver<Connection>>
}

그런 다음 쿼리 또는 변형 함수의 매개변수로 사후 해석기에서 이 컨텍스트를 사용합니다.

한 가지는 GraphQL 유형과 Entity 유형이 있다는 것입니다. 일종의 중복. 또한 반환 형식을 Promise<Post[]>로 지정하여 모든 형식을 반환하지 않도록 합니다.

  @Mutation(() => Post) // GraphQL return type that map to same Post Entity
  async createPost(
  @Arg("title") title: string,
  @Ctx() { em }: RedditDbContext
  ): Promise<Post> // same Entity return type
  {
  ...
  }

이제 모든 설정이 완료되었으며 이를 실행하면 GraphQL이 createdAt 엔터티의 Post 속성에 유형을 설정하기 때문에 오류가 발생합니다.

NoExplicitTypeError: Unable to infer GraphQL type from TypeScript reflection system. You need to provide explicit type for 'createdAt' of 'Post' class.

GhraphQL을 지원하기 위해 Post 엔터티에 대해 명시적으로 유형을 추가하는 문제를 해결합니다.

@Field(() => String) // explicitly define type.
@Property({ type: "date" })
createdAt = new Date();

Query or Mutation method needs 2 parameters. Context object and Arguments.

이제 모든 것을 설정하고 GraphQL 플레이그라운드로 이동하여 아래 쿼리를 실행하여 데이터베이스에서 모든 게시물을 가져올 수 있습니다.

{
  posts {
    id,
    createdAt,
    updatedAt,
    title
  }
}

헐... GraphQL에서 데이터를 가져왔어

이제 Post 엔터티에 대한 모든 CRUD 작업을 만들 것입니다. 이러한 메서드는 Promise.를 반환해야 합니다. 일단 모든 CRUD 메서드를 구현하면 아래GraphQL 쿼리를 실행할 수 있습니다.

게시물 ID로 게시물을 얻으려면 아래 쿼리를 실행하십시오.

{
  post(id:3){
    title
  }
}

아래 쿼리를 사용하여 새 게시물을 만들 수 있습니다. mutation 쿼리입니다. 또한 매개변수를 전달하는 방법에 주의하십시오.

mutation {
  createPost(title:"Hello from GraphQL"){
    title,
    id
  }
}

다음은 업데이트 게시물 쿼리입니다.

mutation {
  updatePost(id:1, title: "I am going to update this title") {
    title
  }
}
// the title is what are the values that we need as return values

다음은 delete 게시물GraphQL 쿼리입니다.

mutation{
  deletePost(id:1)
}

console에 주의를 기울이면 GraphQL이 실행하는 쿼리를 볼 수 있습니다.

이 게시물과 관련된 모든 코드는 여기에서 찾을 수 있습니다.

rasikag/reddit-clone

여기에서 이 메모를 마무리하겠습니다. 곧 이 메모의 다음 부분을 게시할 것입니다.

이와 관련하여 질문할 사항이 있으면 여기에 댓글을 남겨주세요. 또한 내 이해에 따라 이것을 썼습니다. 따라서 잘못된 점이 있으면 주저하지 말고 저를 수정하십시오. 정말 감사합니다.

오늘의 친구들을 위한 것입니다. 곧 봐요. 고맙습니다

기본 이미지credit