[typescript] 타입스크립트와 GraphQL을 함께 사용하는 성능 최적화 방법

15 Dec 2023

typescript

GraphQL은 클라이언트에서 필요한 데이터를 요청할 수 있는 강력한 쿼리 언어이며, 타입스크립트는 언어 자체의 안정성 및 가독성으로 많은 사람들에게 사랑받고 있습니다. 그러나 두 기술을 함께 사용할 때 발생할 수 있는 성능 문제를 해결하는 것은 중요합니다. 이를 위해 몇 가지 방법을 살펴보겠습니다.

1. 쿼리 커서 사용

큰 데이터셋을 다룰 때, GraphQL 쿼리의 결과를 페이징하는 것이 중요합니다. 커서 기반 페이징을 사용하면 성능을 향상시킬 수 있습니다. 데이터베이스에서 페이징을 수행할 때, 커서 기반으로 진행하면서 불필요한 메모리 사용을 줄일 수 있습니다.

// 예시 코드
type QueryResult {
  // ...
  edges: [Node]
  pageInfo: PageInfo
}

type Node {
  cursor: String
  // ...
}

type PageInfo {
  hasNextPage: Boolean
  endCursor: String
}

2. 데이터 캐싱

GraphQL을 사용할 때, 요청에 대한 데이터를 캐싱하여 중복 요청을 방지하는 것은 성능 최적화에 중요합니다. Memcached나 Redis와 같은 데이터베이스를 사용하여 결과를 캐싱하고, 쿼리 시도 전에 캐시를 확인하는 것이 좋습니다.

// 예시 코드
const resolvers = {
  Query: {
    user: async (_, { id }, { dataSources }) => {
      const cachedUser = await dataSources.userAPI.getUserFromCache(id);
      if (cachedUser) {
        return cachedUser;
      }
      const user = await dataSources.userAPI.getUserById(id);
      await dataSources.userAPI.cacheUser(user);
      return user;
    },
  },
};

3. 필드 선택적으로 가져오기

GraphQL에서는 클라이언트가 필요한 데이터만을 요청할 수 있습니다. 이를 활용하여 필요한 필드만 선택적으로 불러오는 방법을 사용함으로써 불필요한 데이터를 가져오지 않아 성능을 최적화할 수 있습니다.

// 예시 코드
type Query {
  user(id: ID!): User
}

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

// 쿼리의 예시
{
  user(id: "123") {
    name
    email
  }
}

결론

타입스크립트와 GraphQL을 함께 사용할 때 성능을 최적화하는 것은 중요합니다. 큰 데이터셋을 처리할 때는 쿼리 커서를 사용하고, 데이터를 캐싱하여 중복 요청을 방지하며, 필요한 필드만 선택적으로 가져오는 것이 좋습니다.

이러한 방법을 활용하여 타입스크립트와 GraphQL을 효율적으로 사용하고 성능을 최적화할 수 있을 것입니다.

참고 문헌: