[GraphQL] 5. GraphQL 실행 환경 구성하기(with Apollo)

GraphQL 실행 환경

직접 구현하지 않고 온라인에서 해도 되지만, 직접 구성해도 어렵지 않기 때문에 소개한다. 추가적으로 노드몬을 설치하여 변경 사항을 자동 감지하도록 하겠다. 마지막으로는 Resolver에 대해 간단하게만 짚고 넘어갈려고 한다.

 

Step by Step

아래 순서를 따라하면 된다.

1. 프로젝트를 만들 경로로 이동한다.

본인이 원하는 아무 곳이나 좋다. 새로 폴더를 만드는 것을 추천한다.

2. npm init -y

-y 옵션은 npm 설정이 귀찮을때 애용하면 좋다.

3. 필요한 패키지를 설치한다.

cf) Apollo를 사용할 예정이다.

> npm i apollo-server graphql nodemon

세개의 패키지를 먼저 설치했다.

4. package.json을 수정한다.

main과 start 부분만 추가하면 된다. 똑같이 넣어주자.

5. 루트 경로에서 index.js를 추가한다.

그리고 아래 예제 코드를 넣으면 테스트 환경이 구성 완료된다.

const { ApolloServer } = require('apollo-server');

const typeDefs = `
    type Query {
        totalPhotos: Int!
    }
`

const resolvers = {
    Query: {
        totalPhotos: () => 42
    }
}

const server = new ApolloServer({
    typeDefs, resolvers
})

server.listen().then(({url}) => console.log(`GraphQL Service running on ${url}`))

6. npm start를 입력해 주고 http://localhost:4000/ 접속하면 끝!

그림과 같이 나왔다면 끝났다!

간단하게 설명을 추가하자면 typeDefs 변수 안에 스키마를 문자열 형태로 정의한다. totalPhotos 같은 쿼리를 만들려면 반드시 같은 이름을 가진 리졸버 함수가 있어야 한다. 스키마 정의 바로 아래 resolvers를 만들고 안에 스키마에서 정의한 함수를 만들어 주면 준비가 끝난다. 리졸버 함수는 반드시 스키마객체와 같은 typename을 가진 객체 아래에 정의해 두어야 한다.

그리고 아래에 서버 부분은 server 인스턴스를 새로 추가하고 인자로 스키마와 리졸버를 객체어 넣어 전달해준 부분이다.

 

Resolver (리졸버)

리졸버는 특정 필드의 데이터를 반환하는 함수이다. 왜 갑자기 리졸버를 말하냐 싶겠지만, 앞에서 다룬 내용은 GraphQL의 쿼리에 관한 내용이었다. 스키마에 사용자가 작성할 수 있는 쿼리를 정의해 두고, 타입간의 연관 관계를 적어줬다. 여기에는 데이터 요구 사항에 대한 내용은 들어 있지만 실제로 데이터를 가져오는 일은 스키마가 아닌 리졸버의 몫이다.

리졸버는 스키마에 정의된 타입과 형태(Shape)에 따라 데이터를 반환한다. 비동기로 작성할 수 있으며, REST API, DB, 기타 서비스의 데이터를 가져오거나 업데이트 작업을 할 수 있다.

Resolver는 GraphQL의 핵심이며, 모든 필드는 그에 대응하는 리졸버 함수가 있어야 한다. 리졸버 함수는 스키마에 정의된 필드와 반드시 동일한 이름을 가져야 하고, 스키마에 정의된 데이터 타입을 반환한다.

 

 

참고자료

• https://graphql-kr.github.io/
• https://graphql.org/
• https://landscape.graphql.org/
• Learing GraphQL by Eve Porello and Alex Banks(O'Reilly). Copyright 2018 Moon Highway, LLC, 978-1-492-03071