yarn berry와 Apollo Server를 이용한 GraphQL 서버 환경 구축

1. 초기 설정

1.1. 빈 프로젝트 생성

서버 구축을 위한 디렉토리 생성

      

      

      

    
    

      <shell />
    
$ mkdir apollo-server-test
$ cd apollo-server-test

 

1.2. yarn berry 설정

yarn berry를 사용하기 위해 yarn set version 명령어를 통해 berry로 변경해준다.

      

      

      

    
    

      <shell />
    
$ yarn set version berry

 

변경 후 제대로 변경이 됐는지 확인해본다.

      

      

      

    
    

      <shell />
    
$ yarn -v
3.2.1

 

2. Apollo Server 구축

2.1. 의존성 모듈 설치

graphql 서버를 구축하기 위해, 본 글에서는 apollo-server를 사용한다. yarn berry를 사용하여, apollo-server와 graphql를 설치한다.

      

      

      

    
    

      <shell />
    
$ yarn init
$ yarn add apollo-server graphql

 

2.2. zero-installs 설정

yarn berry의 장점 중 하나인 zero-install 설정을 한다. 설정이라고 해봤자, .gitignore에 .yarn/.cache를 포함하면 됨

 

.gitignore

      

      

      

    
    

      <bash />
    
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
!.yarn/cache

 

만약, zero-installs를 사용하기 싫다면, 아래 "더보기"를 확인해주세요.

.gitignore 설정을 아래와 같이 하여, .cache 파일이 git repository에 올라가지 않도록한다.

      

      

      

    
    

      <bash />
    
.yarn/*
!.yarn/patches
!.yarn/releases
!.yarn/plugins
!.yarn/sdks
!.yarn/versions
.pnp.*

 

2.3. GrqphQL 스키마 정의

간단한 graphql 스키마를 작성한다. 예제로 사용자에 대한 정보를 반환할 수 있는 User 타입을 생성한다.

      

      

      

    
    

      <javascript />
    
const { ApolloServer, gql } = require('apollo-server');

// 타입 정의
const typeDefs = gql`
  type User {
    id: Int
    name: String
    age: Int
  }

  type Query {
    user(id: Int!): User
  }
`;

 

2.4. Resolver 정의

resolver를 정의하기 전에 테스트를 위한 테스트 데이터를 생성한다.

      

      

      

    
    

      <javascript />
    
// 테스트 데이터
const users = [
  {
    id: 1,
    name: '철수',
    age: 25,
  },
  {
    id: 2,
    name: '영희',
    age: 23,
  },
  {
    id: 3,
    name: '길동',
    age: 30,
  },
];

 

client에서 요청을 보냈을때, 실제 동작을 수행할 비지니스 로직을 작성하여, Resolver를 추가한다.

      

      

      

    
    

      <javascript />
    
// resolver 정의
const resolvers = {
  Query: {
    user: (parent, args, context, info) => {
      console.log(args);
      return users.find(user => user.id === args.id);
    },
  },
};

 

정의한 타입과 resolver, 그리고 옵션들과 함께 ApolloServer를 생성한다.

      

      

      

    
    

      <javascript />
    
// apollo server 생성
const server = new ApolloServer({
  typeDefs,
  resolvers,
  csrfPrevention: true,
});

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

 

아래 명령어를 사용하여, Apollo Server를 실행한다.

      

      

      

    
    

      <bash />
    
$ node src/index.js

 

좀 더 편리하게 package.json의 scripts를 추가하면 편리하다.

      

      

      

    
    

      <bash />
    
{
  ...
  "scripts": {
    "dev": "node src/index.js"
  },
  ...
}

위와 같이 설정을 했으면, yarn dev를 사용하여 실행할 수 있다.

 

http://localhost:4000 으로 접속하면 아래와 같은 화면이 나오는데, "Query your server"를 누르면 GraphQL 쿼리를 작성하여 만든 GraphQL API를 테스트해볼 수 있다. (API를 호출해볼 수 있는 https://studio.apollographql.com/sandbox/explorer 사이트로 리다이렉트 해줌)

 

Apollo GraphQL에서 API를 테스트 해볼 수 있는 UI까지 제공해주기 때문에, curl 없이 손 쉽게 GraphQL API를 호출해 볼 수 있다.

GraphQL API 호출 테스트

 

쿼리와 body에 data를 작성하고, API를 호출해보면 아래와 같이 Response 값이 온다.

      

      

      

    
    

      <javascript />
    
query ExampleQuery($userId: Int!) {
  user(id: $userId) {
    id
    name
    age
  }
}

      

      

      

    
    

      <javascript />
    
{
  "userId": 2
}

사용자 정보를 조회하는 GraphQL API 호출

 

만약, name 과 age 값만 필요하다면, 아래와 같이 id 를 빼고 API를 호출하면 된다.

      

      

      

    
    

      <javascript />
    
query ExampleQuery($userId: Int!) {
  user(id: $userId) {
    name
    age
  }
}

 

 

 

3. Reference

• https://www.apollographql.com/docs/
• https://yarnpkg.com/features/zero-installs