GraphQL-js를 사용하여 클라이언트를 개발하고자 할 때, TypeScript를 활용하면 타입 안정성을 확보하고 코드 유지보수성을 향상시킬 수 있습니다. 이 글에서는 TypeScript를 사용하여 GraphQL-js 클라이언트를 개발하는 방법에 대해 알아보겠습니다.

1. GraphQL-js 클라이언트 라이브러리 선택

GraphQL-js 클라이언트를 개발하기 위해서는 먼저 사용할 클라이언트 라이브러리를 선택해야 합니다. 몇 가지 인기있는 옵션에는 apollo-client, urql, relay 등이 있으며, 이 중 TypeScript와의 통합에 가장 우수한 것으로 알려진 apollo-client를 선택하는 것이 일반적입니다.

2. TypeScript 설정

먼저 프로젝트에 TypeScript를 설정합니다. 프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성하고 필요한 TypeScript 구성을 추가합니다. 일반적으로는 다음과 유사한 설정을 사용할 수 있습니다.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

3. Apollo Client 및 GraphQL-js 라이브러리 설치

다음으로, TypeScript 프로젝트에 필요한 Apollo Client 및 GraphQL-js 라이브러리를 설치해야 합니다. npm을 사용하는 경우, 다음 명령을 실행합니다.

npm install @apollo/client graphql

4. GraphQL 스키마 정의

GraphQL-js 클라이언트를 개발하기 전에 백엔드에서 제공하는 GraphQL 스키마를 정의해야 합니다. 스키마는 TypeScript로 정의하고 사용할 쿼리와 뮤테이션을 명시적으로 정의하는 것이 좋습니다. 이렇게 하면 TypeScript 컴파일러가 코드를 검증하고 오류를 사전에 잡을 수 있습니다.

// schema.ts
import { gql } from '@apollo/client';

export const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
    }
  }
`;

export const ADD_USER = gql`
  mutation AddUser($input: AddUserInput!) {
    addUser(input: $input) {
      id
      name
    }
  }
`;

5. Apollo Client 초기화

Apollo Client를 초기화하고 GraphQL 서버와 통신할 때 필요한 설정을 구성합니다. TypeScript를 사용하면 Apollo Client 설정과 초기화 단계에서 타입 안정성을 확보할 수 있습니다.

// apollo.ts
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { GET_USERS, ADD_USER } from './schema';

const httpLink = createHttpLink({
  uri: 'https://example.com/graphql',
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  typeDefs: [GET_USERS, ADD_USER], // Include the type definitions
});

결론

TypeScript를 사용하여 GraphQL-js 클라이언트를 개발하는 것은 코드 안정성을 높이고 유지보수성을 향상시키는 데 도움이 됩니다. Apollo Client와 함께 TypeScript를 사용하면 GraphQL 클라이언트 개발 과정을 더욱 안전하고 효율적으로 만들 수 있습니다.

이상으로 이번 글에서는 TypeScript를 사용하여 GraphQL-js 클라이언트를 개발하는 방법을 알아보았습니다.

참고 문헌:

• Apollo Client Documentation
• TypeScript Handbook