Express + GraphQL + MongoDB 시작하기 - 4

React + GraphQL - Typescript 시작하기 - 2에서 이어지는 내용

https://velog.io/@mkh1213/React-GraphQL-Typescript-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-2
화면쪽 코드 작성 후 서버쪽 코드 작성

회원가입

• src/resolvers/user.js의 mutation 부분 수정

Mutation: {
        async postUser(_, {email, password, name}) {
            console.log("postUser 실행!")
            const newUser = new User({
                email,
                password,
                name,
            });
            let result;
            try {
                result = await newUser.save();
            } catch (error) {
                console.log(`postUser Error [${error}]`);
            }
            return result;
        }
    },

• MongoDB에 저장하는 로직을 추가.
• 스키마에 required가 true인 Value값이 없을 경우 에러 발생.

회원가입 테스트 해보기

• 화면, 서버를 실행(npm run start)
  

• test@test.com / test / test 입력 후 SIGN UP 버튼 클릭
  

• MongoDB 확인하면 값이 잘 들어온 것을 확인

로그인

• src/resolvers/user.js의 query 부분 수정

    Query: {
        async getUser(_, {email, password}) {
            console.log("getUser 실행!");
            const result = await User.findOne({email: email, password: password});
            return result;
        }
    },
 

로그인 테스트 해보기

• 화면, 서버를 실행(npm run start)
  
• test@test.com / test 입력 후 SIGN IN 버튼 클릭
• test@test.com / test2 입력 후 SIGN IN 버튼 클릭
  
• 제대로 된 값과 엉뚱한 값 입력 시 console창의 로그가 다르다.

회원정보수정, 회원탈퇴

• src/resolvers/user.js의 mutation 부분에 patchUser, deleteUser 함수 추가

    Query: {
        async getUser(_, {email, password}) {
            console.log("getUser 실행!");
            let result;
            try {
                result = await User.findOne({email: email, password: password});
            } catch (error) {
                console.log(`getUser Error = ${error}`);
            }
            return result;
        },
        async getUserByEmail(_, {email}) {
            let result;
            try {
                result = await User.findOne({email: email});
            } catch (error) {
                console.log(`getUser Error = ${error}`);
            }
            return result;
        }
    },
    Mutation: {
        async postUser(_, {email, password, name}) {
            console.log("postUser 실행!")
            const newUser = new User({
                email,
                password,
                name,
            });
            let result;
            try {
                result = await newUser.save();
            } catch (error) {
                console.log(`postUser Error = ${error}`);
            }
            return result;
        },
        async patchUser(_, {email, password, name}) {
            console.log("patchUser 실행!")

            let result;
            try {
                result = await User.findOneAndUpdate(
                    {email: email},
                    {$set: {password: password, name: name}}    
                );
            } catch (error) {
                console.log(`patchUser Error = ${error}`);
            }
            return result;
            return result;
        },
        async deleteUser(_, {email, password}) {
            console.log("deleteUser 실행!");
            let result;
            try {
                result = await User.findOneAndDelete({email: email, password: password});
            } catch (error) {
                console.log(`deleteUser Error = ${error}`);
            }
            return result;
        }
    },

• GraphQL 스키마 수정(src/graphql/userTypeDefs.js)

type Query {
    getUser(
        email: String!
        password: String!
    ): User
    getUserByEmail(
        email: String!
    ): User
}

type Mutation {
    postUser(
        email: String!
        password: String!
        name: String!
    ): User
    patchUser(
        email: String!
        password: String!
        name: String!
    ): User
     deleteUser(
        email: String!
        password: String!
        name: String!
    ): User
}

• 회원가입과 마찬가지로 화면에서 변수들을 받아 DB를 Update, Delete 처리
• Update는 findOneAndUpdate를 사용.
  findOneAndUpdate의 첫번째 인자는 수정할 데이터를 찾기 위한 값
  두번째 인자는 $set으로 수정될 데이터를 넣는 값
• Delete는 findOneAndDelete를 사용.
  (Mongoose에서 findOneAndRemove 사용하지 않는걸 권장)
  (deleteOne은 삭제 후 return값이 없지만, findOneAndUpdate는 return값이 있음)

Update와 Delete의 화면쪽 코드 작성

이어서

https://velog.io/@mkh1213/React-GraphQL-Typescript-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-3