Chapter3 - Backend Setup

[sloway]

Apollo Server Setup

Introduction

• GraphQL 기능을 제공하는 WebServer 이다.
• WebServer이긴 하지만 GraphQL 기능에 특화되어 있기 때문에 다른 기능과 함께 사용 할 때에는 express 와 연동해서 사용하는 것으로 보인다.
• Official home 이나 Github 를 보면 상당히 잘 관리되고 있는 opensource 로 보인다.
• Apollo 에는 Server 외에도 다른 기능? 패키지? 등을 많이 제공하고 있는데, 이번엔 apollo server만 사용 할 예정

Installation

강의에서는 이렇게 설치하라고 되어 있다

npm install apollo-server graphql 

하지만 Github guide 를 보면 최신 버전은 좀 바뀐것 같다

npm install @apollo/server graphql

최신 명령어로 설치 완료

Test with mjs

Github guide가 server.mjs 를 만들어 쓰라고 되어 있다. mjs가 아마 module js 같은데, 여기서 mjs를 사용하는 이유는 top level 에서 await 사용을 하기 위해서인듯하다 server.mjs 를 만들어서 실행한 후 localhost:4000으로 접속해보니 Playground 가 무사히 실행된다. 참고로 Playground 는 apollo에서 제공하는 GraphQL request/response를 테스트 할 수 있는 webpage 이다.

Test with typescript

mjs 말고 확장자를 .ts 로 바꿔서 실행해보니까 top level 에서 await를 사용 한 것 때문에 error 가 발생한다

const { url } = await startStandaloneServer(server);
console.log(`🚀 Server ready at ${url}`);
// 최상위 'await' 식은 'module' 옵션이 'es2022', 'esnext', 'system', 'node16' 또는 'nodenext'로 설정되고 'target' 옵션이 'es2017' 이상으로 설정된 경우에만 허용됩니다

그래서 await 대신에 then 으로 바꿔서 실행하니 문제 없이 실행 되었다

startStandaloneServer(server).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});
``

### VisualStudio Code Extension
Official page에 [vsc extension](https://www.apollographql.com/docs/devtools/editor-plugins) 이 소개되어 있어서 설치해본다.
여가지 기능들이 많이 소개가 되어있는데 (서버 연동 얘기도 있는데 그거까지는 필요없고)
Syntax highlighting 과 Autocomplete 만 되도 편할 것 같은데 잘 될런지는 써보면서 판단

그럼 Apollo setup 은 여기까지

[sloway]

Apollo GraphQL extension

Apollo GraphQL 을 위한 VSCode extension 이 있길래 설치했다. Homepage 에는 여러가지 기능이 설명되어 있지만 Syntax highlight 만 지원되도 좋고, Autocomplete 까지 지원되면 더 좋고...