[GraphQL] Apollo Server를 이용한 GraphQL 사용 방법

Apollo Server는 Server 프로그래밍과 Client 프로그래밍 모두에 사용할 수 있는 오픈 소스 GraphQL 서버입니다. 

이번 포스팅에서는 Apollo Server와 GraphQL의 간단한 소개와 사용 방법에 대해서 알아보도록 하겠습니다.

 

목차
1. GraphQL은 무엇인가
2. Apollo Server는 무엇인가

 

---

GraphQL 무엇인가

GraphQL은 API에 대한 쿼리 언어라고 표현하고 있습니다. GraphQL을 사용하면 필요한 데이터만을 가공해서 가져올 수 있으며 만약 추가적인 데이터를 필요로 할 경우 간단히 수정이 가능합니다.

출처 : GraphQL 홈페이지

GraphQL 쿼리는 항상 예측 가능한 결과를 반환하고 서버에서 가져온 데이터를 제어하는 데 사용되는 언어입니다.

 

GraphQL이 지원하는 언어 역시 굉장히 많기 때문에 프로그래머가 필요한 라이브러리를 다운로드 해서 사용하시면 됩니다.

출처: GraphQL 홈페이지

대표적으로 사용되는 Apollo Server와 함께 오늘은 이야기해볼까 합니다.

---

Apollo Server 무엇인가

Apollo Server는 GraphQL을 사용하는 모든 클라이언트와 호환되며 오픈 소스로 된 GraphQL 서버입니다.

Apollo Server 홈페이지에서는 다음과 같이 사용할 수 있다고 표기되어 있습니다.

• 서버리스 환경을 포함한 독립형 GraphQL 서버
• 애플리케이션의 기존 Node.js 미들웨어에 대한 추가 기능 (Express 또는 Fastify)
• 연합 데이터 그래프를 위한 게이트웨이

Apollo Server는 데이터 가져오는 셋팅조차 매우 간단하고 빠르게 시작할 수 있습니다. 그럼 Apollo Server를 설치하고 GraphQL을 이용해서 데이터를 가져오는 방법을 알아보도록 하겠습니다.

---

Apollo Server 시작하는 방법

기본적인 플랫폼은 Node.js의 npm을 이용합니다. 따라서 Node.js가 미리 설치가 되어 있어야 하며 javascript의 기본 지식이 있는 상태이면 조금 더 쉽게 이해하실 수 있습니다.

2021.03.19 - [쿤즈 Dev/Nodejs] - [Nodejs] NodeJS 설치 및 프로젝트 생성하기(feat. Windows & macOS)

[Nodejs] NodeJS 설치 및 프로젝트 생성하기(feat. Windows & macOS)

---

Apollo Server (1): 프로젝트 생성

가장 먼저 해야할 일은 설치할 디렉터리(폴더)를 만들고 새로운 프로젝트를 준비하는 것입니다. macOS의 경우는 쉘에서 Windows의 경우는 cmd를 이용하시면 됩니다. 그럼 먼저 디렉터리부터 만들어 줍니다.

mkdir apollo-server-proj
cd apollo-server-proj

mkdir 명령어는 make directory라는 뜻으로 디렉터리를 생성한다는 의미입니다. cd는 change directory라는 의미로 현재 위치를 입력한 디렉터리 위치로 이동하라는 명령어입니다.

 

다음은 npm(Node Package Manager)를 이용해서 새로운 프로젝터를 초기화하도록 합니다. npm이 아닌 yarn과 같은 다른 도구들을 사용해도 됩니다.

npm init --yes

위 명령어까지 정상적으로 입력했다면 package.json 파일이 생성됩니다.

이제 프로젝트를 만들 준비가 되었으니 vscode로 이동하겠습니다.

code .

환경변수 설정이 되어 있다면 현재 디렉터리에서 vscode가 열리게 됩니다.

---

Apollo Server (2): Dependencies 설치

Apollo Server 애플리케이션을 동작시키기 위해서는 아래 두 가지를 설치해 주셔야 합니다.

• apollo-server: Apollo Server의 코어 라이브러리입니다.
• graphql: GraphQL 스키마와 퀴리를 실행시킬 수 있는 라이브러리입니다.

두 개의 모듈은 역시 npm을 이용해서 설치합니다. vscode에서 터미널을 열어주세요. 상단 메뉴에 [Terminal] > [New Terminal]을 선택하거나 단축키 ctrl + shift + `입니다.

 

터미널이 오픈되었으면 아래와 같이 입력해서 모듈을 설치합니다.

npm install apollo-server graphql

정상적으로 설치가 완료되면 node_modules라는 디렉터리(폴더)가 새로 생성되며 아래 많은 모듈이 자동으로 설치되었을 것입니다. 그리고 package-lock.json 파일도 함께 생성됩니다.

 

다음은 프로그래밍으로 넘어가겠습니다.

---

Apollo Server (3): Define GraphQL schema

우선 Apollo Server에서 사용하는 GraphQL의 스키마(schema)를 생성해야 합니다. 우선 최초 실행되는 파일을 하나 만들어 주도록 하겠습니다. 파일명은 index.js입니다.

 

vscode에서 마우스 우측 버튼으로 새로운 파일을 생성합니다. macOS의 터미널에서는 아래와 같은 명령어로도 사용이 가능합니다.

touch index.js

touch 명령어는 빈 파일을 생성하는 명령어입니다.

 

이제 vscode를 이용해서 index.js를 열고 아래와 같이 입력합니다.

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

// GraphQL schema definition
const typeDefs = gql`
  # GraphQL 스키마 정의 내부에서의 주석은 (#)을 이용합니다.

  # 샘플 스키마를 정의
  # Book 타입
  type Book {
    title: String
    author: String
  }

  # Query 타입
  # 이 타입은 내부에 Book 타입이 배열([...]) 형태로 들어감
  # Query의 결과는 빈 배열이거나 여러개의 Book 이 들어간 배열 형태
  type Query {
    books: [Book]
  }
`;

우선 가장 먼저 apollo-server를 가져오면서 사용할 obejct는 ApolloServer와 gql만을 가져왔습니다.

 

GraphQL의 스키마를 정의합니다. 스키마를 정의할 때 사용방법은 gql object를 이용해서 만들어 줍니다. 샘플에서는 Book 타입과 Query 타입을 만들었습니다.

 

Book 타입은 실제 데이터를 가져올 형태를 의미하며 Query는 내가 호출할 함수들을 정의합니다. 즉 GraphQL로 호출하는 API는 books가 될 것이며 결과는 Array 형태로 Book이 담겨서 넘어오게 됩니다.

---

Apollo Server (4): 샘플 데이터 정의

실제 데이터라면 Database에서 값을 가져와서 결과를 response 해주겠지만 샘플이기 때문에 결과를 index.js에 넣고 시작하도록 하겠습니다.

 

위 소스코드 아래에 추가해 주도록 합니다.

const books = [
  {
    title: 'The Awakening',
    author: 'Kate Chopin',
  },
  {
    title: 'City of Glass',
    author: 'Paul Auster',
  },
];

 이 데이터는 타입을 정의할 때, 결과로 출력될 값을 의미합니다. 출력의 결과는 현재 2개의 Book 정보를 담고 있는 Array의 형태입니다.

---

Apollo Server (5): Resolver 정의

위에서는 타입을 정의하고 다음은 response 할 데이터를 만들어 놨습니다. 이제는 호출할 API가 필요합니다. 그 API들을 모아놓은 것이 바로 Resolver입니다.

 

Resolver를 만들어 보겠습니다. 소스코드는 추가로 이어서 작성해 주시면 됩니다.

// Resolvers는 정의한 스키마를 호출할때 실행할 API를 정의함
// Query에는 books 라는 API가 있고 이는 함수형태
// books를 호출하면 결과는 샘플로 정의한 books 데이터가 response됨
const resolvers = {
  Query: {
    books: () => books,
  },
};

resolvers변수 역시 Object 형태이며 Query가 정의되어 있습니다. Query 내부에는 여러 가지 API 이름들을 정의할 수 있습니다.

 

먼저 정의한 이름은 books입니다. GraphQL을 이용해서 책정보를 가져올 때 부르는 API는 books라는 이름으로 호출해야 합니다. 그리고 결과는 샘플로 만들어 놓은 books가 return 됩니다.

---

Apollo Server (6): Apollo Server instance 생성

이제 마지막입니다. 위에서 정의한 타입과 resolvers를 이용해서 Apollo Server를 생성합니다.

// Apollo Server에 대한 Obejct를 생성
// parameter로 들어가는 Object는 { typeDefs, resolvers }
const server = new ApolloServer({ typeDefs, resolvers });

// 생성한 server Object의 listen() 함수 실행
// listen() 함수는 Promise 함수로 .then()을 이용해서 결과를 받음
// 결과중 url 정보만을 가져와서 출력
server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`);
});

Apollo Server Object의 parameter로는 위에서 생성한 type과 resolver를 넣어줍니다. 다음으로 서버를 실행하기 위해서 listen() 함수를 사용하면 간단하게 Apollo Server가 동작합니다. liten() 함수는 Promise 함수로 .then() 을 사용해서 결과를 받을 수 있습니다.

---

Apollo Server (7): Apollo Server 실행

프로그래밍이 끝났으니 이제 서버를 동작시켜 보도록 하겠습니다. Node.js로 구성되어있기 때문에 동작방법은 동일합니다.

node index.js

정상적으로 실행이 되었다면 위에서 로그로 출력한 'Server ready at http://localhost:4000/'이라는 메시지가 나타나게 됩니다.

---

Apollo Server API 실행 방법

API를 만들고 서버를 동작시켰다면 실행을 해봐야 합니다. 위에서 로그를 보시면 4000 포트(default port)로 서버가 실행된 것을 볼 수 있습니다. 그럼 서버를 접속해 보도록 합니다.

 

 

접속하면 위 그림과 같은 화면이 나타납니다. 그럼 위에서 만든 api를 한번 실행해 보도록 하겠습니다. GraphQL 쿼리를 실행하기 위해서는 화면의 왼쪽에 아래 쿼리를 입력합니다.

// 사용방법 1
{
  books {
    title
    author
  }
}

// 사용방법 2
query books {
  books { // resolver에 등록된 query 이름
    title
    author
  }
}

books라는 API(위에서 만든 resolver의 query)를 실행하는 문법입니다. 가장 윗줄(query books)이라는 문구는 생략해도 되지만 저의 경우는 현재 구문이 query인지 이후에 사용할 mutation 혹은 subscription인지를 표시해 주는 것이 직관적이라 2번과 같이 사용합니다.

 

resolver에 등록한 Query 중 books라는 쿼리를 호출할 예정이고 받을 데이터는 title과 author라고 명시해줬습니다.

 

만약 왼쪽을 아래와 같이 변경했다면 어떤 데이터가 출력될까요?

query books {
  books {
    title
  }
}

이 경우 books를 호출하고 데이터는 title을 받게 됩니다.

 

즉, 서버에서는 모든 데이터를 결과로 내려주지만 GraphQL에서는 원하는 데이터만을 가져올 수 있습니다. API를 변경하지 않아도, DB 쿼리를 변경하지 않아도 원하는 데이터만을 가져올 수 있는 것이 GraphQL의 장점입니다.

---

이번 포스팅에서는 GraphQL에 대해서 간략히 알아보았습니다. 그리고 GraphQL을 사용하는 대표적인 모듈인 Apollo Server를 이용해서 간단한 프로그래밍을 진행하였습니다.

 

굉장히 쉽고 간단하게 서버를 구현해 볼 수 있으며, 차근차근 하나씩 포스팅해 보도록 하겠습니다. 도움이 되셨으면 합니다. 이상입니다.

 

참고 :https://www.apollographql.com/docs/apollo-server/