React 및 GraphQL - 03을 사용하여 Reddit 클론 만들기

여기에서 찾을 수 있는 이 기사의 코드베이스.

rasikag/reddit-clone

우리는 Post 엔티티를 생성했습니다. 이제 User 엔터티를 만들 것입니다.

Note:

If we remove @Field() from the entity it will not alow to select that property.

이제 많은 마이그레이션을 생성할 것이기 때문에 package.json 파일에 마이그레이션 명령어를 추가해 보겠습니다.

"create:migration": "mikro-orm migration:create",

yarn create:migration을 실행하여 마이그레이션을 만듭니다.

하지만 해당 마이그레이션 파일을 확인해보면 up() 방법이 없습니다. User 파일에 mikro-orm.config 엔티티를 추가하지 않았기 때문입니다. 추가한 후 명령을 다시 실행하십시오.

...
// adding User entity in src/mikro-orm.config file.
entities: [Post, User],
...

main 함수에서 코드 라인 아래에 추가했습니다. 서버를 다시 시작할 때마다 마이그레이션이 실행됩니다.

...
await orm.getMigrator().up();
...

실행 중일 때 데이터베이스의 마이그레이션 세부 정보 테이블을 확인하고 보류 중인 마이그레이션 스크립트를 실행합니다.

이제 사용자를 위해 Resolver을 만들 것입니다. 스키마에 리졸버를 추가했는지 확인하십시오.

// src/index.ts
...
resolvers: [HelloResolver, PostResolver, UserResolver],
...

사용자의 경우 등록 방법은 username 및 password 2개의 인수를 사용합니다. 클래스를 생성하여 뷰 모델로 사용할 수 있습니다. @InputType 주석으로 장식하십시오.

암호를 일반 텍스트로 저장하지 않습니다. 우리는 암호를 해시합니다. 이를 위해 Argon 2를 사용하고 있습니다. 아래 yarn 명령을 사용하여 추가합니다.

yarn add argon2

Pro tip from Ben: \
Once you're in a repository if you see the file with [filename].d.ts you know that it already has the type support. You are good to go.

좋습니다. 사용자 등록을 위한 코드를 추가했고 모두 테스트하도록 설정했습니다. 다음은 이를 생성하기 위한 GraphQL 쿼리입니다. 거기에서 개체를 전달해야 합니다. 쿼리의 구조를 참조하십시오. register 메서드는 옵션 개체를 인수로 사용합니다.

mutation {
  register(options: {username: "rasikag",password: "rasikag"}) {
    id
    createdAt
    updatedAt
    username
  }
}

여기서 한 가지 강조하고 싶은 점은 등록된 문서를 열면 암호를 받지 못한다는 것을 알 수 있다는 것입니다. 필드에서 제거하기 때문입니다.

강조하고 싶은 또 다른 점은 @Arg()에 대해 options 유형을 언급하지 않았다는 것입니다. 우리는 그것을 암묵적으로 발생시킵니다.

@Arg("options") options: UsernamePasswordInput

위의 코드가 작동하지 않으면 명시적으로 유형을 말한 것입니다.

@Arg("options", () => UsernamePasswordInput) options: UsernamePasswordInput,

이제 로그인 기능을 추가합니다. 여기에서는 @ObjectType 주석을 사용합니다. @ObjectType은 돌연변이의 반환 유형으로 사용할 수 있습니다.

이제 여기에서 필드 오류를 정의하고 있습니다. 그렇게 하기 위해 우리는 @ObjectType으로 또 다른 FieldError을 생성합니다.

자, 이제 사용자 로그인이 있습니다. 이것을 시도해보자.

mutation {
  login(options: {username: "rasikag", passward: "rasikag"}){
    errors {
      field
      message
    }
    user {
      id
    username
    }
}

해당 UserResponse 객체를 사용하고 있으므로 그에 따라 등록 방법을 변경해 보겠습니다. 다음은 이에 대한 관련 GhraphQL 쿼리입니다.

mutation {
  register(options: {username: "rasikag", passward: "rasikag"}){
    errors {
      field
      message
    }
    user {
      id
      username
    }
  }
}

아래 코드 블록에서 오류 핸들을 제거하고 시도해보십시오. 강조해야 할 흥미로운 점이 있습니다.

// UserResolver
try {
  await em.persistAndFlush(user);
} catch (err) {
  // comment out the code in here
}

return { user };

GraphQL 콘솔에서 다음과 같은 오류가 발생합니다.

connot return null for non-nullable field User.id

그곳에서 일어날 일은 사용자를 삽입하려고 하는데 실패한다는 것입니다. 그런 다음 마지막 줄에서 null이지만 user id은 nullable 필드가 아니라는 사용자를 반환합니다. 그래서 그것에 관한 오류.

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

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

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

이 기사 시리즈는 .

메인 이미지 credit