[API] GraphQL 서버 만들기

GraphQL 서버 구축

 

프로젝트를 생성하기 전 Node.js, VS Code를 설치하셔야 합니다.

 

• 프로젝트 생성

1. 자신이 원하는 경로에 폴더 생성 후 VS Code에서 오픈합니다. Ctrl + `로 터미널 창을 연 후 npm init을 사용하여 Node.js 프로젝트를 생성합니다.

2. npm init 명령어가 끝나면 package.json이 생성됩니다.

3. index.js 파일 생성 후 console.log('프로젝트 생성 완료')를 입력합니다.

터미널에서 node index.js를 입력 시 index.js에 입력한 내용이 표시됩니다.

nodemon index.js(명령어가 안될 시 npx nodemon index.js) 명령어 실행 시 Node.js프로젝트가 실행이 됩니다.

4. package.json내용에 "start": "nodemon index.js" 내용 추가를 합니다.

터미널에 npm start 명령어만으로 프로젝트가 실행이 됩니다.

 

• 목(mock) 데이터베이스 모듈 삽입

1. database.js 및 데이터.csv파일 생성

 

database.js 파일 생성 후 아래의 코드를 입력합니다.

const csvToJson = require('convert-csv-to-json')

// csv파일 명 기입
const database = {
  person: [],
  teams : []
}
Object.keys(database).forEach((key) => {
  database[key] = [
    ...database[key], 
    ...csvToJson.fieldDelimiter(',')
      .getJsonFromCsv(`./data-in-csv/${key}.csv`)
  ]
  if (database[key].length > 0) {
    const firstItem = database[key][0];
    Object.keys(firstItem).forEach((itemKey) => {
      if (database[key].every((item) => {
        return /^-?\d+$/.test(item[itemKey])
      })) {
        database[key].forEach((item) => {
          item[itemKey] = Number(item[itemKey])
        })
      }
    })
  }
})

module.exports = database

 

csv 파일에 데이터를 입력하여 프로젝트 폴더에 저장합니다.

2. index.js 파일 수정

 

3. 필요 모듈 설치 후 TEST

 

npm i convert-csv-to-json 명령어를 통해 필요 모듈을 설치합니다.

모듈 설치 완료 후 npm start 명령어를 통해 csv의 파일들 내용이 JSON형태로 콘솔에 출력되는 것을 확인 할수 있습니다. index.js 파일에서 consle.log(database) 부분을 consle.log(database.csv파일명[인덱스])로 수정하면 해당 부분의 데이터가 콘솔에 출력됩니다.

 

• Apollo 서버 설치

1. apollo server설치

 

npm i graphql apollo-server 명령어를 통해 필요 모듈을 설치 합니다.

 

2. index.js 파일 수정

 

index.js 파일을 아래와 같이 수정합니다.

const database = require('./database')
const { ApolloServer, gql } = require('apollo-server')
const typeDefs = gql`
  type Query {
    teams: [Team]
  }
  type Team {
    id: Int
    manager: String
    office: String
    extension_number: String
    mascot: String
    cleaning_duty: String
    project: String
  }
`
const resolvers = {
  Query: {
    teams: () => database.teams
  }
}
const server = new ApolloServer({ typeDefs, resolvers })
server.listen().then(({ url }) => {
console.log(`Server ready at ${url}`)
})

AplloServer : typeDef와 resolver를 인자로 받아 서버 생성

typeDef : GraphQL 명세에서 사용될 데이터, 요청의 타입 지정 / gql로 생성

resolver : 서비스의 액션들을 함수로 지정 / 요청에 따라 데이터를 반환, 입력, 수정, 삭제

GraphQL Playground : 작성한 GraphQL type, resolver 명세 확인 / 데이터 요청 및 전송 테스트

 

3. Apllo Server Start

 

npm start 명령어를 통해 Apllo서버를 실행합니다.

 

콘솔에 나온 http://localhost:4000/ 경로 접속 시 아래와 같이 Apllo가 실행 된것을 확인할 수 있습니다.