GraphQL은 데이터를 효율적으로 관리하고 API를 유연하게 구축하기 위한 쿼리 언어입니다. 타입스크립트는 정적 타입을 제공하여 개발자가 코드를 안전하게 유지하고 유지보수할 수 있도록 도와줍니다. 이 블로그 포스트에서는 타입스크립트를 사용하여 GraphQL을 프론트엔드에서 어떻게 개발하는지 알아보겠습니다.
1. GraphQL 클라이언트 라이브러리 설치
가장 먼저 필요한 것은 GraphQL 클라이언트 라이브러리를 설치하는 것입니다. Apollo Client는 React 애플리케이션에서 GraphQL을 사용하는 데 널리 사용되는 라이브러리입니다. 타입스크립트와 함께 Apollo Client를 설치하는 방법은 다음과 같습니다.
npm install @apollo/client graphql
2. GraphQL 스키마 정의
GraphQL에서는 스키마를 사용하여 데이터 모델을 정의합니다. 타입스크립트를 사용하여 GraphQL 스키마를 정의할 때는 graphql-codegen
과 함께 @graphql-codegen/typescript
플러그인을 사용하여 타입 정의를 생성할 수 있습니다.
npm install @graphql-codegen/cli @graphql-codegen/typescript
그리고 codegen.yml
파일을 프로젝트 루트에 생성하여 다음과 같은 설정을 추가합니다.
schema: http://localhost:4000/graphql
documents: 'src/**/*.graphql'
generates:
src/generated/graphql.ts:
plugins:
- 'typescript'
- 'typescript-operations'
- 'typescript-react-apollo'
3. GraphQL 쿼리 및 뮤테이션 작성
Apollo Client를 사용하여 GraphQL 쿼리와 뮤테이션을 작성할 때는 타입스크립트로 타입 안전성을 확보할 수 있습니다. 예를 들어, 다음과 같이 사용자 정보를 가져오는 GraphQL 쿼리를 작성할 수 있습니다.
import { gql } from '@apollo/client';
export const GET_USER = gql`
query GetUser($userId: ID!) {
user(id: $userId) {
id
name
email
}
}
`;
4. GraphQL 쿼리 실행
마지막으로, 작성한 GraphQL 쿼리를 실행하여 데이터를 가져오는 방법을 알아봅시다.
import { useQuery } from '@apollo/client';
import { GET_USER } from './queries';
const UserProfile = ({ userId }) => {
const { loading, error, data } = useQuery(GET_USER, {
variables: { userId },
});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<div>
<p>Name: {data.user.name}</p>
<p>Email: {data.user.email}</p>
</div>
);
};
타입스크립트를 사용하여 GraphQL을 프론트엔드에서 개발하는 방법을 알아보았습니다. 타입 안전성을 확보하면서 GraphQL을 사용하여 데이터를 효율적으로 관리할 수 있습니다.