GraphQL을 사용한 웹 API 개발 방법

13 Oct 2023

javascript

GraphQL은 Facebook에서 개발한 쿼리 언어로, 웹 개발에서 API를 개발하고 사용하기 위한 강력한 도구입니다. 이번 블로그 포스트에서는 GraphQL을 사용하여 웹 API를 개발하는 방법에 대해 알아보겠습니다.

1. GraphQL 소개

GraphQL은 REST API와 달리 클라이언트가 필요한 데이터를 정확하게 요청할 수 있는 유연한 쿼리 언어입니다. 클라이언트는 필요한 필드와 관계를 정의하고, 서버는 해당 요청에 대응하는 데이터만을 반환합니다. 이를 통해 필요한 데이터의 양을 줄이고, 다양한 종류의 데이터를 한 번의 요청으로 가져올 수 있습니다.

2. GraphQL 서버 개발하기

GraphQL 서버 개발을 위해서는 다음 단계를 따릅니다:

단계 1: 스키마 정의하기

GraphQL 서버는 스키마를 기반으로 동작합니다. 스키마는 API에서 사용 가능한 타입과 쿼리, 뮤테이션을 정의합니다. 스키마는 GraphQL 스키마 언어로 정의할 수 있습니다.

예를 들어, 아래와 같은 간단한 스키마를 정의할 수 있습니다:

type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  getUser(id: ID!): User
  getUsers: [User]
}

type Mutation {
  createUser(name: String!, email: String!): User
}

단계 2: 리졸버 구현하기

리졸버는 스키마에서 정의한 각 필드에 대해 어떤 데이터를 반환할지를 결정하는 함수입니다. 각 필드마다 리졸버 함수를 구현하여 데이터를 가져올 수 있습니다. 일반적으로 데이터베이스나 외부 API와의 연동이 이루어집니다.

예를 들어, 위 스키마의 리졸버 함수 예시는 다음과 같습니다 (Node.js를 기준으로):

const resolvers = {
  Query: {
    getUser: (parent, { id }) => {
      // 사용자 정보를 데이터베이스에서 조회
      return db.getUser(id);
    },
    getUsers: () => {
      // 모든 사용자 정보를 데이터베이스에서 조회
      return db.getUsers();
    },
  },
  Mutation: {
    createUser: (parent, { name, email }) => {
      // 사용자 생성 로직을 구현하고, 생성된 사용자 반환
      return db.createUser(name, email);
    }
  },
}

단계 3: GraphQL 서버 구축하기

GraphQL 서버를 구축하기 위해 필요한 라이브러리를 설치하고, 스키마와 리졸버를 설정해야 합니다. 대표적인 GraphQL 서버 라이브러리로는 Apollo Server, Express 등이 있습니다.

예를 들어, Apollo Server를 사용하여 GraphQL 서버를 구축하는 코드는 다음과 같습니다 (Node.js와 Express 기준):

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

// 스키마와 리졸버를 import 또는 require하고,
const typeDefs = require('./schema.js');
const resolvers = require('./resolvers.js');

const server = new ApolloServer({ typeDefs, resolvers });

// Express와 연결
const app = express();
server.applyMiddleware({ app });

// 서버 실행
app.listen({ port: 4000 }, () =>
  console.log(`Server running at http://localhost:4000${server.graphqlPath}`)
);

단계 4: API 사용하기

GraphQL 서버가 구축되었다면 클라이언트에서 해당 API를 사용할 수 있습니다. 클라이언트는 필요한 데이터를 정확하게 요청할 수 있고, 응답으로 필요한 데이터만을 받을 수 있습니다.

예를 들어, 클라이언트에서 다음과 같이 사용할 수 있습니다 (JavaScript):

const { ApolloClient, InMemoryCache, gql } = require('@apollo/client');

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});

// 사용자 정보 요청
client.query({
  query: gql`
    query {
      getUser(id: 1) {
        id
        name
        email
      }
    }
  `
})
  .then(result => console.log(result.data))
  .catch(error => console.error(error));

결론

GraphQL은 유연한 쿼리 언어로, 웹 API 개발을 보다 효율적이고 강력하게 만들어 줍니다. 이번 블로그 포스트에서는 GraphQL 서버를 개발하는 기본적인 단계에 대해 알아보았습니다. 자세한 내용은 공식 문서를 참고하시기 바랍니다.

참고: