kimhyunsu@gmail.com – 페이지 3

작성일 2024년 10월 3일 작성자 [email protected] — 댓글 남기기

GraphQL의 페이징

페이징(Pagination)은 많은 양의 데이터를 효율적으로 가져오기 위해 데이터를 여러 페이지로 나누어 클라이언트에 제공하는 방법입니다. GraphQL에서도 대량의 데이터를 다룰 때 페이징을 적용하여 서버와 클라이언트 간의 성능을 최적화할 수 있습니다.

GraphQL에서는 두 가지 주요 페이징 방법을 지원합니다:

Offset-based pagination (오프셋 기반 페이징)
Cursor-based pagination (커서 기반 페이징)

두 방식 모두 클라이언트가 데이터를 나누어 요청하고, 필요한 만큼만 받아올 수 있게 합니다. 각각의 방식에 대해 자세히 설명해볼게요.

1. Offset-based Pagination (오프셋 기반 페이징)

Offset-based pagination은 전통적인 REST API에서 흔히 사용하는 방식입니다. 이 방식은 페이지당 몇 개의 데이터를 가져올지 결정하고, 특정 **오프셋(offset)**을 기준으로 데이터를 요청하는 방식입니다.

1) 기본 개념

offset: 데이터를 몇 번째부터 가져올지 결정하는 숫자입니다.
limit: 한 번에 몇 개의 데이터를 가져올지 결정하는 숫자입니다.

2) 예시

사용자 목록을 페이지 단위로 가져오는 예를 들어볼게요.

GraphQL 쿼리:

query getUsers($offset: Int!, $limit: Int!) {
  users(offset: $offset, limit: $limit) {
    id
    name
    email
  }
}

이 쿼리는 offset과 limit 값을 변수로 받아, 해당 페이지의 사용자 목록을 반환합니다. 예를 들어, offset: 0과 limit: 10이면 첫 번째 페이지의 10명의 사용자를 가져옵니다.

3) 서버 리졸버 예시 (Node.js)

const resolvers = {
  Query: {
    users: async (parent, { offset, limit }) => {
      return await User.find().skip(offset).limit(limit);
    }
  }
};

이 리졸버에서는 skip()과 limit() 메서드를 사용해 MongoDB에서 해당 범위의 데이터를 가져옵니다.

장점:

간단하고 이해하기 쉬운 방식입니다.
기존의 SQL 데이터베이스 또는 NoSQL 데이터베이스에서 쉽게 사용할 수 있습니다.

단점:

데이터가 많아질수록 오프셋이 커질 경우, 성능이 떨어질 수 있습니다. 특히 오프셋이 클 경우, 쿼리가 느려질 수 있습니다.
데이터가 변경될 경우, 클라이언트가 정확한 페이지의 데이터를 보장받지 못할 수 있습니다.

2. Cursor-based Pagination (커서 기반 페이징)

Cursor-based pagination은 더 효율적이고 성능이 좋은 방식으로, 특히 대량의 데이터를 다룰 때 적합합니다. **커서(cursor)**는 특정 데이터를 식별할 수 있는 고유 값(예: 데이터베이스의 고유 ID)을 사용하여, 해당 커서를 기준으로 다음 페이지 데이터를 가져옵니다.

1) 기본 개념

cursor: 현재 위치를 나타내는 값(예: 데이터의 ID).
first/last: 몇 개의 데이터를 가져올지 결정하는 값입니다. first는 처음부터 데이터를 가져오고, last는 끝에서부터 데이터를 가져옵니다.

2) 예시

사용자 목록을 커서 기반으로 가져오는 예를 살펴볼게요.

GraphQL 쿼리:

query getUsers($first: Int!, $after: String) {
  users(first: $first, after: $after) {
    edges {
      node {
        id
        name
        email
      }
      cursor
    }
    pageInfo {
      endCursor
      hasNextPage
    }
  }
}

이 쿼리에서는 first로 데이터를 몇 개 가져올지 결정하고, after로 특정 커서(이전 데이터의 마지막 아이디)를 기준으로 데이터를 요청합니다. 서버는 해당 커서 이후의 데이터를 반환하게 됩니다.

3) 서버 리졸버 예시 (Node.js)

javascript코드 복사const resolvers = {
  Query: {
    users: async (parent, { first, after }) => {
      const cursorCondition = after ? { _id: { $gt: after } } : {};
      const users = await User.find(cursorCondition).limit(first);
      
      const edges = users.map(user => ({
        node: user,
        cursor: user._id // 커서를 ID로 사용
      }));

      const hasNextPage = users.length === first;
      const endCursor = hasNextPage ? users[users.length - 1]._id : null;

      return {
        edges,
        pageInfo: {
          endCursor,
          hasNextPage
        }
      };
    }
  }
};

이 예시에서 after 값이 있는 경우 해당 커서(ID) 이후의 데이터를 가져오고, first 값에 따라 데이터를 제한합니다. pageInfo 필드에서는 다음 페이지가 있는지 여부를 hasNextPage로 반환하며, 마지막 커서 값을 endCursor로 반환합니다.

장점:

데이터가 추가되거나 삭제되어도 페이징에 문제가 발생하지 않습니다. 커서를 기준으로 하므로, 데이터가 변경되더라도 올바른 페이지를 가져올 수 있습니다.
오프셋 기반보다 성능이 뛰어납니다. 특히 오프셋이 큰 경우 성능 저하 문제를 피할 수 있습니다.

단점:

커서를 관리해야 하므로 구현이 더 복잡할 수 있습니다.
데이터베이스에 커서로 사용할 고유 값(예: ID)이 필요합니다.

3. 페이징 선택: Offset vs Cursor

언제 Offset-based를 사용할까?

간단한 애플리케이션에서 데이터 양이 적고, 페이징의 성능이 크게 중요하지 않은 경우.
이미 SQL 기반의 전통적인 데이터베이스와 연동하고 있고, 오프셋 방식을 쉽게 사용할 수 있을 때.

언제 Cursor-based를 사용할까?

대량의 데이터를 처리하거나, 데이터가 자주 변경되는 경우.
성능이 중요한 애플리케이션에서 데이터의 정확성과 성능을 보장해야 할 때.

4. Relay 스타일 페이징

Relay는 GraphQL 클라이언트 라이브러리 중 하나로, Cursor-based pagination을 사용할 때 권장되는 페이징 방식입니다. Relay 스타일 페이징은 edges와 pageInfo 구조를 사용하며, GraphQL API 설계 시 모범 사례로 많이 사용됩니다.

Relay 스타일 페이징 구조:

edges: 데이터를 담고 있는 배열이며, 각 데이터는 node와 cursor로 구성됩니다.
pageInfo: 페이지 정보를 담고 있으며, 다음 페이지가 있는지 여부(hasNextPage)와 마지막 커서(endCursor) 등을 포함합니다.

Relay 스타일 쿼리:

query getUsers($first: Int!, $after: String) {
  users(first: $first, after: $after) {
    edges {
      node {
        id
        name
        email
      }
      cursor
    }
    pageInfo {
      endCursor
      hasNextPage
    }
  }
}

5. 페이징을 더 효율적으로 관리하는 방법

서버에서 페이징 제한 설정: 서버에서 limit 값을 제한하여 클라이언트가 너무 많은 데이터를 요청하는 것을 방지할 수 있습니다. 예를 들어, 최대 100개의 데이터만 한 번에 가져올 수 있도록 설정할 수 있습니다.
필터링과 페이징 결합: 페이징과 함께 데이터 필터링 기능을 제공하면 클라이언트가 더 유용하게 데이터를 요청할 수 있습니다. 예를 들어, 특정 조건에 맞는 데이터를 페이징하여 가져올 수 있도록 합니다.
캐싱: 페이징된 데이터를 캐시하여 같은 요청이 반복될 때 서버 자원을 아끼고 응답 시간을 줄일 수 있습니다.

결론

Offset-based pagination은 단순한 구현으로 시작하기 좋지만, 대량의 데이터를 다룰 때는 성능 문제가 발생할 수 있습니다.
Cursor-based pagination은 데이터의 정확성을 유지하면서 더 나은 성능을 제공합니다. 특히 데이터가 자주 변경되는 애플리케이션에서 유리합니다.
Relay 스타일 페이징은 GraphQL API에서 많이 사용하는 패턴이며, 성능과 확장성을 모두 고려한 좋은 선택입니다.

페이징은 애플리케이션의 데이터 처리 성능을 최적화하는 중요한 기법이므로, 사용하려는 데이터의 양과 특성에 맞게 페이징 방식을 선택하는 것이 중요합니다.

작성일 2024년 10월 3일 작성자 [email protected] — 댓글 남기기

데이터베이스와의 연동은 GraphQL의 리졸버에서 데이터베이스 요청을 처리하는 방식으로 이루어집니다. 이를 통해 클라이언트가 GraphQL 쿼리나 뮤테이션을 통해 데이터를 요청하거나 수정할 수 있습니다. 이번에는 Node.js 환경에서 MongoDB나 PostgreSQL 같은 데이터베이스와 GraphQL을 연동하는 방법을 예시로 설명할게요.

1. GraphQL 서버와 데이터베이스 연동 기본 개념

GraphQL 서버는 데이터 요청을 처리할 때 **리졸버(Resolver)**를 사용합니다. 리졸버는 클라이언트의 요청을 받아 데이터베이스에 질의(query)하거나, 데이터를 수정하는 역할을 합니다.

기본 흐름:

클라이언트는 GraphQL 쿼리나 뮤테이션을 서버에 보냅니다.
GraphQL 서버의 리졸버는 해당 요청을 처리하고, 데이터베이스에 연결해 데이터를 조회하거나 변경합니다.
데이터베이스는 리졸버의 요청에 따라 데이터를 반환합니다.
서버는 클라이언트에 요청한 데이터를 반환합니다.

2. MongoDB와의 연동

MongoDB는 NoSQL 데이터베이스 중 하나로, JavaScript 객체처럼 데이터를 저장하는 유연한 구조를 가지고 있습니다. Mongoose라는 ORM(Object Relational Mapping)을 통해 Node.js와 쉽게 연동할 수 있습니다.

1) 환경 설정

패키지 설치:bash코드 복사npm install mongoose npm install graphql express express-graphql
MongoDB와 연결 설정: 먼저 MongoDB에 연결하고, Mongoose를 이용해 데이터를 처리하는 간단한 예제를 작성해보겠습니다.

const mongoose = require('mongoose');
const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

// MongoDB 연결
mongoose.connect('mongodb://localhost:27017/mydatabase', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

// Mongoose 스키마 정의
const userSchema = new mongoose.Schema({
  name: String,
  email: String
});

const User = mongoose.model('User', userSchema);

// GraphQL 스키마 정의
const schema = buildSchema(`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }

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

// GraphQL 리졸버 정의
const root = {
  users: async () => {
    return await User.find();
  },
  user: async ({ id }) => {
    return await User.findById(id);
  },
  addUser: async ({ name, email }) => {
    const newUser = new User({ name, email });
    await newUser.save();
    return newUser;
  }
};

// Express 설정
const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}));

app.listen(4000, () => {
  console.log('Server is running on http://localhost:4000/graphql');
});

2) 설명

Mongoose 스키마: userSchema는 MongoDB에 저장될 사용자의 구조를 정의합니다. 이름과 이메일을 필드로 가지는 사용자 데이터를 정의하였습니다.
리졸버: users 리졸버는 모든 사용자 목록을 반환하고, addUser는 새로운 사용자를 추가한 후 해당 데이터를 반환합니다.
MongoDB와 연동: 리졸버에서 Mongoose의 find()나 findById()와 같은 메서드를 사용해 데이터를 데이터베이스에서 조회하고, save()로 새 데이터를 저장합니다.

3) 실행 및 테스트

서버를 실행하고 브라우저에서 http://localhost:4000/graphql에 접속하면 GraphiQL을 통해 데이터를 조회하거나 추가할 수 있습니다.

예를 들어, 사용자 목록을 가져오는 쿼리:

query {
  users {
    id
    name
    email
  }
}

새로운 사용자를 추가하는 뮤테이션:

mutation {
  addUser(name: "Alice", email: "[email protected]") {
    id
    name
    email
  }
}

이렇게 하면 MongoDB에 데이터가 저장되고, 조회할 수 있습니다.

3. PostgreSQL과의 연동

PostgreSQL은 SQL 기반의 관계형 데이터베이스입니다. Sequelize라는 ORM을 사용하여 Node.js와 PostgreSQL을 쉽게 연동할 수 있습니다.

1) 환경 설정

패키지 설치:
npm install sequelize pg pg-hstore npm install graphql express express-graphql
PostgreSQL과 연결 설정: PostgreSQL에 연결한 후, Sequelize를 이용해 테이블과 모델을 정의합니다.

const { Sequelize, DataTypes } = require('sequelize');
const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

// PostgreSQL 연결
const sequelize = new Sequelize('postgres://username:password@localhost:5432/mydatabase');

// Sequelize 모델 정의
const User = sequelize.define('User', {
  name: {
    type: DataTypes.STRING,
    allowNull: false
  },
  email: {
    type: DataTypes.STRING,
    allowNull: false
  }
}, {});

// 데이터베이스 초기화
sequelize.sync();

// GraphQL 스키마 정의
const schema = buildSchema(`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }

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

// GraphQL 리졸버 정의
const root = {
  users: async () => {
    return await User.findAll();
  },
  user: async ({ id }) => {
    return await User.findByPk(id);
  },
  addUser: async ({ name, email }) => {
    return await User.create({ name, email });
  }
};

// Express 설정
const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}));

app.listen(4000, () => {
  console.log('Server is running on http://localhost:4000/graphql');
});

2) 설명

Sequelize 모델: User 모델은 PostgreSQL의 users 테이블과 연동됩니다. 각 사용자는 name과 email 필드를 가지고 있습니다.
리졸버: users 리졸버는 모든 사용자 목록을 반환하고, addUser 리졸버는 새로운 사용자를 추가합니다.
PostgreSQL 연동: 리졸버에서 Sequelize의 findAll(), findByPk() 메서드를 사용해 데이터를 조회하고, create()를 사용해 새 데이터를 생성합니다.

3) 실행 및 테스트

서버를 실행하고 브라우저에서 GraphiQL을 통해 데이터를 조회하거나 추가할 수 있습니다. 예시는 MongoDB와 동일하게 쿼리나 뮤테이션을 실행하면 됩니다.

4. 데이터베이스 선택 및 연동의 주요 포인트

1) 데이터베이스 선택

MongoDB: 데이터 구조가 자주 바뀌거나, 비정형 데이터를 다룰 때 NoSQL 데이터베이스인 MongoDB가 유리합니다.
PostgreSQL: 데이터 구조가 고정적이거나 관계형 데이터가 필요할 경우, SQL 기반의 PostgreSQL이 적합합니다.

2) GraphQL과의 연동

GraphQL은 데이터베이스에 독립적인 쿼리 언어입니다. 이를 통해 데이터를 가져오거나 수정할 때, GraphQL 자체는 데이터베이스의 종류에 상관없이 사용될 수 있습니다.
각 데이터베이스와 연동할 때, 적절한 ORM이나 라이브러리를 사용하여 GraphQL의 리졸버와 데이터베이스 간의 연결을 처리하면 됩니다.

[글쓴이:] [email protected]

GraphQL의 페이징

1. Offset-based Pagination (오프셋 기반 페이징)

1) 기본 개념

2) 예시

3) 서버 리졸버 예시 (Node.js)

장점:

단점:

2. Cursor-based Pagination (커서 기반 페이징)

1) 기본 개념

2) 예시

3) 서버 리졸버 예시 (Node.js)

장점:

단점:

3. 페이징 선택: Offset vs Cursor

언제 Offset-based를 사용할까?

언제 Cursor-based를 사용할까?

4. Relay 스타일 페이징

Relay 스타일 페이징 구조:

Relay 스타일 쿼리:

5. 페이징을 더 효율적으로 관리하는 방법

결론

GraphQL의 데이터베이스 연동

1. GraphQL 서버와 데이터베이스 연동 기본 개념

기본 흐름:

2. MongoDB와의 연동

1) 환경 설정

2) 설명

3) 실행 및 테스트

3. PostgreSQL과의 연동

1) 환경 설정

2) 설명

3) 실행 및 테스트

4. 데이터베이스 선택 및 연동의 주요 포인트

1) 데이터베이스 선택

2) GraphQL과의 연동