[swift] 아폴로 클라이언트의 코드 생성 방법

15 Nov 2023

swift

아폴로(Apollo)는 GraphQL을 사용하는 웹 애플리케이션을 구축하기 위한 클라이언트 라이브러리이다. 이 라이브러리를 사용하면 서버와의 통신을 쉽게 처리할 수 있으며, 코드 생성 기능을 통해 타입 안전성을 확보할 수 있다.

아폴로 클라이언트의 코드 생성 방법은 아래와 같다.

1. 스키마 작성

먼저, 요청을 보낼 GraphQL 서버의 스키마를 작성해야 한다. 스키마는 GraphQL 서버에서 사용되는 쿼리, 뮤테이션 등의 타입 정보를 정의한다.

2. 코드 생성 설정

아폴로 CLI(Command Line Interface)를 사용하여 코드를 생성할 수 있다. 아폴로 CLI는 Node.js 환경에서 동작하는 도구로, 프로젝트의 package.json 파일에 아폴로 관련 의존성을 추가해야 한다.

{
  "dependencies": {
    "apollo": "x.x.x",
    "graphql": "x.x.x",
    "graphql-tag": "x.x.x"
  },
  "scripts": {
    "generate": "apollo codegen:generate --queries=./src/queries/**/*.graphql --target=typescript",
    "watch": "apollo codegen:watch --queries=./src/queries/**/*.graphql --target=typescript"
  }
}

위의 예시는 타입스크립트를 대상으로 코드를 생성하는 설정이다. generate 스크립트는 코드를 한 번 생성하는 명령어이고, watch 스크립트는 코드를 지속적으로 감시하고 변경 사항이 있을 경우 자동으로 코드를 생성하는 명령어이다. 또한, queries 폴더 내의 .graphql 파일을 대상으로 코드를 생성한다고 설정되어 있다.

3. 코드 생성 실행

실행 전, 프로젝트에 스키마를 포함한 .graphql 파일을 작성해야 한다. 이 파일들은 서버의 스키마를 기반으로 쿼리를 작성하는 데 도움이 된다.

코드 생성은 아래와 같은 명령어로 실행할 수 있다.

npm run generate

위 명령어를 실행하면, 아폴로 CLI가 .graphql 파일을 스캔하고 필요한 코드를 생성한다. 이 코드는 아폴로 클라이언트 내에서 사용되며, 타입 안전성을 확보할 수 있다.

4. 코드 사용

코드 생성이 완료되면, 생성된 코드를 애플리케이션에서 사용할 수 있다. 이 코드에는 생성된 쿼리 함수들이 포함되어 있으며, 이를 통해 서버와의 데이터 통신이 가능하다.

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { MyQuery } from './graphql/generated';

const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint',
  cache: new InMemoryCache(),
});

client.query<MyQuery>({
  query: YOUR_QUERY,
}).then(result => {
  console.log(result.data);
}).catch(error => {
  console.error(error);
});

위의 예시는 생성된 쿼리 함수 MyQuery를 사용하여 서버로부터 데이터를 가져오는 코드이다. 쿼리 함수에 필요한 인자를 전달하고, client.query()를 호출하여 데이터를 가져올 수 있다.

1. 스키마 작성

2. 코드 생성 설정

3. 코드 생성 실행

4. 코드 사용

참고 자료