Apollo 튜토리얼 - 스키마 만들기

Photo by Jeremy Thomas on Unsplash

 

Apollo로 풀 스택 앱을 빌드하는 방법을 알아보기 위해 튜토리얼을 따라 해보자!

 

튜토리얼을 통해 만들어 볼 앱은 SpaceX 출시에 대한 좌석을 예약하기위한 대화 형 앱이라고 한다

우주 여행을 위한 Airbnb라고 생각하고 만들기~

여기서 사용되는 모든 데이터는 SpaceX-API로 실제 데이터라고 함!!

 

무튼 이제 튜토리얼 보고 따라하기 시작~ 🚀

튜토리얼 보러가기

 

 

---

 

 

 

예제 앱 클론하기

$ git clone https://github.com/apollographql/fullstack-tutorial.git

 

기능을 구축하기 위해 스키마를 우선 만든다
스키마는 필요한 데이터를 기능에 따라 서버에 어떻게 요청할지에 대한 정보를 담는다

 

 

 

Apollo 서버 설정하기

[ start/server 디렉토리에 아폴로 서버 설치 ]

cd start/server && npm install

 

[ src/index.js 파일에 아래 코드 붙여 넣기 ]

const { ApolloServer } = require('apollo-server');
const typeDefs = require('./schema');

const server = new ApolloServer({ typeDefs });

 

 

 

 

스키마 설계하기

[ src/schema.js 파일에 아래 코드 붙여 넣기 ]

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

const typeDefs = gql`
  # Your schema will go here
`;

module.exports = typeDefs;

스키마는 gql 함수 내부 백틱(``) 사이에 들어간다

 

 

 

객체 유형 정의하기

[ src/schema.js 파일 코드 중 백틱 안에 아래 코드 붙여 넣기 ]

type Launch {
  id: ID!
  site: String
  mission: Mission
  rocket: Rocket
  isBooked: Boolean!
}

type Rocket {
  id: ID!
  name: String
  type: String
}

type User {
  id: ID!
  email: String!
  trips: [Launch]!
  token: String
}

type Mission {
  name: String
  missionPatch(size: PatchSize): String
}

enum PatchSize {
  SMALL
  LARGE
}

* 선언 된 필드 유형 뒤에 있는 느낌표(!)는 "이 필드의 값은 null 일 수 없음"을 의미한다

* 선언 된 필드의 유형에 대괄호([])가 있는 경우 배열을 의미한다. 배열 뒤에 느낌표가 있으면 배열은 null 일 수 없지만 비어 있을 수 있음을 뜻한다

 

 

 

쿼리(Query) 정의하기

클라이언트에서 정의된 데이터 그래프에 존재하는 개체를 가져오기 위해서는 쿼리를 정의해야한다

 

[ src/schema.js 파일에 아래 코드 붙여 넣기 ]

 

type Query {
  launches: [Launch]!
  launch(id: ID!): Launch
  me: User
}

• launches: Launch 배열

• launch: Launch 하나의 id

• me: User 현재 로그인 한 사용자들

 

 

Mutation 유형 정의하기

Mutation 유형은 유사한 구조의 특별한 유형 Query유형으로 쿼리를 통해 클라이언트는 데이터를 가져올 수 있지만 

데이터를 수정할 수는 없다. 그러므로 클라이언트가 데이터를 수정할 수 있도록 스키마에서 일부 Mutation을 정의해야 한다

 

[ src/schema.js 파일에 아래 코드 붙여 넣기 ]

type Mutation {
  bookTrips(launchIds: [ID]!): TripUpdateResponse!
  cancelTrip(launchId: ID!): TripUpdateResponse!
  login(email: String): User
}

type TripUpdateResponse {
  success: Boolean!
  message: String
  launches: [Launch]
}

• bookTrips: 로그인 한 사용자 하나 이상에 여행을 예약 할 수 있음

• cancelTrip: 로그인 한 사용자가 이전에 예약하는 여행을 취소 할 수 있음

• login: 자신의 이메일 주소를 제공하여 로그인 할 수있는 사용자

 

이렇게해서 스키마 완성 🎉

 

 

 

 

---

 

 

 

서버 실행하기

[ src/index.js 파일에 아래 코드 붙여 넣기 ]

server.listen().then(() => {
  console.log(`
    Server is running!
    Listening on port 4000
    Explore at https://studio.apollographql.com/dev
  `);
});

[ 코드 저장 후 아래 명령어 실행하여 서버 시작하기 ]

npm start

 

이제 http://localhost:4000 Apollo Server 에서 실행된다 🎉

 

 

 

GraphQL Playground 살펴보기

GraphQL Playground는 GraphQL 서버를 쿼리하기 위한 오픈 소스 도구이다 

서버가 실행 중인 상태에서 브라우저 http://localhost:4000를 방문하여 GraphQL Playground를 열면 서버의 스키마를 확인할 수 있다

이때 서버의 스키마를 검사하려면 오른쪽에 있는 스키마 버튼을 클릭하면 된다