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으로 접속하면 데이터가 저장된 것을 확인할 수 있음
