[GraphQL] 스키마(Schema) 정의 방법 (3): Query type

지난 포스팅에서 GraphQL의 스키마에 대해서 알아보기 시작했습니다. 그중에서도 기본적인 타입인 Scalar types을 보았고 이후에 이 Scalar types을 포함해서 만든 Object types을 만들어 보았습니다.

이번 포스팅에서는 세 번째로 Query type에 대해서 알아보도록 하겠습니다.

---

GraphQL 지원되는 타입의 종류

GraphQL에서 스키마 정의에 사용되는 모든 타입들은 아래와 같은 종류가 있습니다.

• Scalar types
• Object types
• The Query type
• The Mutation type
• Input types
• Enum types

이 중에서 이번 포스팅에서는 Query types에 대해서 알아보도록 하겠습니다.

---

The Query type

이 타입은 GraphQL의 API와 같은 형태라 생각할 수 있는 타입입니다. 클라이언트 측에서는 이 Query 타입에 있는 Object의 이름들을 호출하여 사용할 수 있습니다.

type Query {
  books: [Book]
  author: [Author]
}

위 Query 타입에서는 내부에 books와 author 두 가지의 필드를 정의했습니다. 만약 이 정의를 클라이언트에서 RESP API처럼 사용한다고 하면 /api/books, /api/author와 같이 사용할 수 있습니다.

 

Query 호출시 books를 호출하는 방법은 아래와 같습니다.

query {
  books {
    title
    author {
      name
    }
  }
}

위처럼 호출하면 Query의 books를 호출하게 되고 결과는 [Book] 형태에 맞게 아래와 같이 받게 됩니다.

{
  "data": {
    "books": [
      {
        "title": "City of Glass",
        "author": {
          "name": "Paul Auster"
        }
      },
      ...
    ]
  }
}

정말 이러한 결과가 나타나는지 함께 만들어 보겠습니다. 기본적인 설치와 셋팅은 아래 글을 참고해 주세요.

2021.05.15 - [쿤즈 Dev/GraphQL] - [GraphQL] Apollo Server를 이용한 GraphQL 사용 방법

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

---

Apollo Server에 Query type 이용 방법

우선 기본적인 Apollo Server는 아래와 같이 프로그래밍 했습니다.

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]
    }
`;

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

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

// 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}`);
});

여기에 Book과 Author type을 typeDef에 포함시켜 줍니다. 저의 경우는 4000 포트를 사용하고 있기 때문에 9000번으로 포트를 변경하였습니다.

type Book {
  title: String
  author: Author
}

type Author {
  name: String
  books: [Book]
}

이제 위에서 언급한 Query를 추가로 입력해 보도록 하겠습니다.

type Query {
  books: [Book]
}

Apollo servere를 실행하기 위해서 다음과 같이 콘솔에 입력해서 실행시킵니다.

node index.js

🚀 Server ready at http://localhost:9000/

정상적으로 실행했다면 실행된 url과 포트가 나타나게 됩니다. 이제 웹으로 접속해서 데이터를 불러오도록 하겠습니다.

---

Apollo Server Query 실행

정상 실행했을 때 나타나는 url을 웹으로 접속합니다. 그럼 아래와 같은 화면이 나타납니다.

Query를 실행해 보도록 하겠습니다. 아래와 같이 입력합니다.

query {
  books {
    title
    author {
      name
    }
  }
}

query임을 명시하고 books라는 query를 실행하겠다는 의미입니다. 실행 이후 받을 결과는 title과 author이며 author는 앞선 타입 선언 시에 Object type으로 선언했기에 내부에 값을 다시 명시하도록 합니다.

 

쿼리를 실행해 보겠습니다.

정상적으로 쿼리가 실행된 것을 볼 수 있습니다. 만약 author 결과는 받지 않으려면 return 데이터에서 author 요소를 제거하면 됩니다.

---

이번 포스팅에서는 Query type에 대해서 알아보았습니다. Query를 만들고 API를 호출해서 결과를 바로 확인할 수 있습니다. Spring boot나 다른 서버 프로그램에서는 Postman을 사용하는 것과 흡사합니다. 다음은 Mutation에 대해서 알아보겠습니다. 도움이 되셨으면 합니다. 이상입니다.