본문 바로가기
개발정리 (nodeJS)

[nodeJS] Node.js로 GraphQL API 구현하기

by 할리갈리0 2024. 9. 18.

GraphQL은 효율적인 데이터 쿼리를 가능하게 하는 강력한 API 쿼리 언어입니다. 기존의 REST API와 비교했을 때, 클라이언트가 필요한 데이터만 정확하게 요청하고 받을 수 있어 네트워크 효율성과 응답 성능을 크게 향상시킬 수 있습니다. 이번 포스팅에서는 Node.js 환경에서 GraphQL API를 구현하고 사용하는 방법을 자세히 설명하겠습니다.

 

1. GraphQL

[GraphQL의 주요 특징]

  • 유연한 쿼리: 클라이언트가 원하는 데이터의 형태를 지정할 수 있어, 과도한 데이터 전송을 줄일 수 있음.
  • 타입 시스템: 스키마를 통해 API의 데이터 구조와 타입을 명확히 정의하여, 타입 안정성 보장.
  • 단일 엔드포인트: 모든 요청이 하나의 엔드포인트로 처리되므로, API 엔드포인트가 간결해짐.
  • 효율적인 데이터 페칭: 클라이언트가 필요한 데이터만 선택적으로 요청할 수 있어, 불필요한 데이터 로딩을 방지.

[GraphQL의 장점]

  • 최적화된 데이터 전송: 클라이언트가 필요한 필드만 요청할 수 있어 네트워크 사용을 최소화.
  • 데이터 오버페칭 및 언더페칭 방지: 필요한 데이터를 정확히 명시하기 때문에 불필요한 데이터 전송(오버페칭)과 필요한 데이터 누락(언더페칭)을 방지 가능.
  • 간결한 API 관리: 하나의 엔드포인트에서 모든 데이터를 제공하므로, 여러 REST 엔드포인트를 관리할 필요 없음.
  • 빠른 개발 속도: 스키마와 리졸버를 활용하여 빠르게 API를 개발하고 변경사항을 반영 가능.

[GraphQL 사용 이유]

  • 다양한 클라이언트 환경: 모바일, 웹 등 다양한 클라이언트가 서로 다른 데이터 요구 사항을 가질 때 유연하게 대응 가능.
  • 빠른 응답성과 최적화된 데이터 전송이 필요한 경우: 클라이언트가 필요한 데이터만 요청하고 받을 수 있어 빠른 응답성과 최적화된 데이터 전송 가능
  • API 변경이 자주 발생하는 경우: 스키마를 통해 API의 구조를 명확히 정의하고 변경할 수 있어, 클라이언트와 서버 간의 협업이 용이.

 

2. Node.js 프로젝트에 GraphQL 설정하기

[프로젝트 초기화 및 필요한 패키지 설치]

  • express: Node.js에서 서버를 설정하기 위한 프레임워크
  • express-graphql: Express 서버에서 GraphQL을 실행하기 위한 미들웨어
  • graphql: GraphQL 스키마와 쿼리를 정의하기 위한 라이브러리
mkdir graphql-nodejs
cd graphql-nodejs
npm init -y
npm install express express-graphql graphql

 

[기본 프로젝트 구조 설정]

  • schema.js: GraphQL 스키마를 정의하는 파일
  • resolvers.js: GraphQL 리졸버를 정의하는 파일
  • server.js: Express 서버와 GraphQL 설정을 초기화하는 파일
graphql-nodejs/
├── src/
│   ├── schema.js
│   ├── resolvers.js
│   └── server.js
├── package.json
└── node_modules/

 

3. GraphQL 스키마 정의 및 리졸버 작성

[GraphQL 스키마 정의]

GraphQL 스키마는 API의 데이터 구조와 쿼리, 변형(mutation)을 정의.

Query와 Mutation 타입을 정의하고 있으며, hello, getUser, createUser라는 세 가지 주요 필드를 포함하고 있는 스키마를 정의.

// src/schema.js
import { buildSchema } from 'graphql';

const schema = buildSchema(`
  type Query {
    hello: String
    getUser(id: ID!): User
  }

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

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

export default schema;

 

[GraphQL 리졸버 정의]

리졸버는 GraphQL 스키마의 각 필드에 대한 실행 코드를 제공.

hello, getUser, createUser에 대한 데이터를 처리하고 반환하는 리졸버 정의.

// src/resolvers.js
const users = [];

const resolvers = {
  hello: () => 'Hello, GraphQL!',

  getUser: ({ id }) => {
    return users.find(user => user.id === id);
  },

  createUser: ({ name, email }) => {
    const user = { id: `${users.length + 1}`, name, email };
    users.push(user);
    return user;
  },
};

export default resolvers;

 

4. GraphQL 서버 구축 및 실행

[Express 서버 설정 및 GraphQL 통합]

src/server.js 파일에서 Express 서버를 설정하고 GraphQL을 통합

/graphql 엔드포인트에서 GraphQL API를 제공하며, 브라우저에서 GraphiQL 인터페이스를 사용할 수 있도록 설정

// src/server.js
import express from 'express';
import { graphqlHTTP } from 'express-graphql';
import schema from './schema.js';
import resolvers from './resolvers.js';

const app = express();

app.use('/graphql', graphqlHTTP({
  schema,
  rootValue: resolvers,
  graphiql: true, // GraphiQL 인터페이스 활성화
}));

const PORT = 4000;
app.listen(PORT, () => {
  console.log(`GraphQL 서버가 <http://localhost>:${PORT}/graphql 에서 실행 중입니다.`);
});

 

[서버 실행]

http://localhost:4000/graphql로 이동하여 GraphQL 서버가 정상적으로 실행되고 있는지 확인

node src/server.js

 

5. 클라이언트에서 GraphQL API 사용하기

GraphQL 클라이언트 또는 브라우저에서 GraphiQL을 사용하여 서버에 쿼리를 요청

query {
  getUser(id: "1") {
    id
    name
    email
  }
}

 

사용자를 생성하는 mutation을 실행하여 서버에 데이터를 추가 가능.

서버에 새로운 사용자가 추가되고, 서버는 생성된 사용자의 정보를 반환.

mutation {
  createUser(name: "John Doe", email: "john@example.com") {
    id
    name
    email
  }
}

 

 

이번 포스팅에서는 Node.js에서 GraphQL을 사용하여 효율적인 데이터 쿼리 API를 구축하는 방법을 살펴보았습니다. GraphQL은 클라이언트가 요청하는 데이터의 형태를 정확하게 정의할 수 있어, 데이터 전송의 효율성을 크게 향상시킬 수 있습니다. 또한, 하나의 엔드포인트에서 모든 데이터를 제공하므로 API 관리가 간결해지고 개발 속도가 빨라집니다.

반응형