React로 블로그 만들기 #9

React로 블로그 만들기 #9

 - 로그인 구현(6) GraphQL, MongoDB -

1. GraphQL

- 소셜로그인으로 받은 정보를 서버에 저장하기 위해 GraphQL과 MongoDB를 사용

- 패키지 설치 : yarn add global graphql-cli

- graphql create blogql(프로젝트 이름) 후 node-minimal 선택

- src에 resolver.js 와 typeDefs.js 생성

1) src/index.js

- graphql-yoga를 이용하여 graphql server를 생성하고 연결한다.

import { GraphQLServer } from 'graphql-yoga';

import resolvers from './resolvers';

import typeDefs from './typeDefs';

// GraphQL Server connect

const server = new GraphQLServer({ typeDefs, resolvers });

server.start(() => console.log(`Server is running at http://localhost:4000`));

2) src/typeDefs.js

- GraphQL Type과 Query, Mutation 관리

- User Type : 유저에 관련된 데이터들

- user Query : id와 provider를 넣으면 유저를 반환함.

- login Mutation : id, name, provider를 넣으면 유저를 반환함.

const typeDefs = `

type User {

id: String!

name: String!

provider: String!

},

type Query {

user(id: String, provider: String): User

},

type Mutation {

login(id: String!, name: String!, provider: String!): User

}

`

export default typeDefs;

2. MongoDB

- 패키지 설치 : yarn add mongoose mongodb

- src/Schema 폴더 생성 후 index.js와 User.js 파일 생성

- mongoose를 이용하여 mongoDB와 연결한다. => 여기서 localhost를 이용하여 컴퓨터에 설치된 몽고디비를 이용해도 되지만 mlab에서 제공하는 몽고디비 서버를 사용함. (참고: https://mlab.com/)

1) src/index.js

import { GraphQLServer } from 'graphql-yoga';

import mongoose from 'mongoose';

import resolvers from './resolvers';

import typeDefs from './typeDefs';

require('dotenv').config();

const { MONGODB_ID, MONGODB_PW } = process.env;

// MongoDB connect

mongoose.connect(`mongodb://${MONGODB_ID}:${MONGODB_PW}@ds052827.mlab.com:52827/reactblog_db`, {useNewUrlParser : true});

mongoose.connection.once('open', () => {

console.log('MongoDB Connected...');

});

// GraphQL Server connect

const server = new GraphQLServer({ typeDefs, resolvers });

server.start(() => console.log(`Server is running at http://localhost:4000`));

2) src/Schema/index.js

- 모든 스키마를 한 파일로 관리하기 위한 파일

export { default as User } from './User';

3) src/Schema/User.js

- 데이터베이스에 저장 할 User Schema 생성 

- id : 소셜로그인으로 부터 제공받은 사용자 아이디

- name : 사용자 이름

- provider : 소셜로그인 (구글, 카카오)

- createdAt : 생성 날짜

import mongoose from 'mongoose';

const { Schema } = mongoose;

const userSchema = new Schema({

id: {

type: String,

required: true,

},

name: {

type: String,

required: true,

},

provider: {

type: String,

required: true,

},

createdAt: {

type: Date,

required: true,

}

});

export default mongoose.model('User', userSchema);

4) src/resolvers.js

- typeDefs에서 정의한 Query와 Mutation을 구현함.

- 처음 로그인 시 데이터베이스에 저장하고 그 후에는 찾은 유저 정보를 반환함.

- MongoDB Timezone이 UTC로 고정되어 있으므로 한국 표준시로 맞춰주기 위해 9시간을 더해줌.

import mongoose from 'mongoose';

import { ObjectId } from 'mongodb';

import { User } from './schemas/index';

const resolvers = {

Query: {

user: async (_, {id, provider}) => {

return await User.findOne({id, provider});

},

},

Mutation: {

login: async (_, { id, name, provider }) => {

const user = await User.findOne({id, provider});

if(!user) {

const date = new Date();

const new_user = new User({

id,

name,

provider,

createdAt: date.getTime()+(3600000*9) // KST,

});

return new_user.save();

}

return user;

}

}

}

export default resolvers;

5) 결과확인

- mlab으로 접속하면 데이터가 저장된 것을 확인할 수 있음