Node.js - Apollo Server

Temporary·2024년 7월 9일

node.js

Nods.js

목록 보기

6/39

@apollo/server 설치

지금까지 Rest-API를 사용하기 위해 express를 사용해 서버를 띄워왔다.

지금부터는 GraphQL-API를 사용해보기 위해서 express와 비슷한 역할을 해주는 @apollo/server를 설치하고 이에 대해서 간단히 알아보자.

새로운 폴더 03-06-graphql-api-with-apollo-server를 만들고

그리고 그 폴더 내부에 index.js를 만들어준다.

이번엔 @apollo/server와 graphql을 설치하고 초기 설정을 진행하기 위해 npm 사이트에서 내용을 살펴보자

@apollo/server 에 대한 내용은 아래 링크에서 확인 가능하다.

https://www.npmjs.com/package/@apollo/server

스크롤을 조금 내려보니 해당 문서에서는 npm을 사용해 설치하도록 안내되어 있다.

지금까지 사용해왔던 yarn을 통해 설치해 보자

먼저 작업할 폴더 경로에서 터미널에 yarn init을 입력해 백엔드 서버 구동 환경을 미리 구성해 줘야한다.

이후 아래의 명령어를 터미널에 입력해 03-06-graphql-api-with-apollo-server 폴더에 @apollo/server와 graphql을 설치한다.

$ yarn add @apollo/server graphql

위와 같이 띄어쓰기로 모듈의 이름을 구분해주면 다수의 모듈을 함께 설치할 수 있다.

설치 완료 후, 문서의 아래쪽에서 확인할 수 있는 초기 index.js 소스코드를 참고하여 VScode의 index.js 파일을 완성시켜보자. 아래와 같이 코드를 완성해보면

// index.js

import { ApolloServer } from '@apollo/server'
import { startStandaloneServer } from '@apollo/server/standalone'

const typeDefs = `#graphql
    type Query {
        qqq: String
    }
`

const resolvers = {
    Query: {
        qqq: () => {
            return "zxcvㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㅇㄹzxvzxㄴ"
        }
    }
}

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

startStandaloneServer(server) // 4000

import를 사용하기 위해 package.json에 "type":"module"을 추가해줘야 한다.

{
  "name": "03-06-grqphql-api-with-apollo-server",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "type": "module",  // import 사용을 위해 추가된 부분

  // 생략 ...

}

우선 이전에 Express를 활용했던 소스코드와 비교하며 아직은 낯선 코드의 내용을 유추해 보자.

그러기 위해 03-01-rest-api-with-express 폴더의 index.js와 비교해 보자

서버를 특정 포트로 열어주는 코드입니다. ApolloServer에서는 포트가 3000이 아닌 기본으로 4000으로 설정된다.

// express
app.listen(3000)

// @apollo/server
startStandaloneServer(server) // 4000

해당 Docs에서 서버를 열어주기 위해 server를 정의해주고 있다.

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

코드를 살펴보면 새로운 ApolloServer를 생성하기 위해 typeDefs와 resolvers가 입력한 것을 알 수 있다.

우선 resolvers는 index.js를 살펴보면 아래와 같이 정의되어 있는데 이전에 express 서버를 사용할 때 보았던 api와 같은 역할을 하는 것으로 보여진다.

// express
app.get('/qqq', function (req, res) {
  res.send('zxcvㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㅇㄹzxvzxㄴ')
})

// @apollo/server
const resolvers = {
    Query: {
        qqq: () => {
            return "zxcvㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㅇㄹzxvzxㄴ"
        }
    }
}