아폴로(Apollo)는 GraphQL을 사용하는 클라이언트 라이브러리로, iOS 앱에서 서버와 효율적인 데이터 통신을 할 수 있게 도와줍니다. 이 라이브러리를 사용하여 반응형 UI를 구현하는 방법을 알아보겠습니다.

1. 아폴로 설치하기

먼저, 프로젝트에 아폴로를 설치해야 합니다. CocoaPods를 사용한다면, Podfile에 아래와 같이 아폴로를 추가합니다.

pod 'Apollo'

설치 후에는 Workspace 파일을 열어 프로젝트를 빌드합니다.

2. 스키마 파일 생성하기

아폴로는 GraphQL 스키마를 사용하여 데이터 모델을 생성합니다. 스키마 파일을 생성해야 합니다. 스키마 파일은 서버에서 제공되거나, 직접 생성할 수 있습니다.

3. 데이터 모델 생성하기

스키마 파일을 기반으로 데이터 모델을 생성해야 합니다. 아폴로는 Apollo Codegen이라는 도구를 제공하여 자동으로 코드를 생성합니다. 아래의 커맨드를 터미널에서 실행하여 코드를 생성합니다.

apollo codegen:generate --target=swift --includes=./**/*.graphql --localSchemaFile=schema.json API.swift

이 명령어는 현재 디렉토리와 하위 디렉토리에 있는 .graphql 파일을 탐색하여 코드를 생성하며, schema.json 파일을 스키마 파일로 사용합니다. API.swift는 생성될 파일의 이름을 지정합니다.

4. Apollo 클라이언트 설정하기

아폴로 클라이언트를 설정해야 합니다. 생성된 데이터 모델과 서버의 URL을 사용하여 클라이언트를 초기화합니다.

import Apollo

let apollo = ApolloClient(url: URL(string: "https://api.example.com/graphql")!)

5. GraphQL 쿼리 작성하기

반응형 UI를 위해 필요한 GraphQL 쿼리를 작성해야 합니다. 예를 들어, 게시물 목록을 가져오기 위한 쿼리는 다음과 같을 수 있습니다.

import Apollo

let query = gql"""
    query GetPosts {
      posts {
        id
        title
        content
      }
    }
"""

6. 데이터 가져오기

작성한 쿼리를 사용하여 데이터를 가져옵니다. 아폴로 클라이언트의 fetch 메서드를 사용하여 쿼리를 실행하고, 결과를 처리합니다.

apollo.fetch(query: query) { result in
    switch result {
    case .success(let graphQLResult):
        // 데이터를 처리하는 로직 작성
    case .failure(let error):
        // 에러 처리
    }
}

7. 화면 업데이트하기

쿼리 결과를 받아와 화면을 업데이트합니다. 아폴로는 데이터가 변경될 때마다 등록한 리스너 함수를 호출하여 화면을 업데이트합니다.

import Apollo

class PostsViewController: UIViewController {
    private var posts: [Post] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        
        apollo.watch(query: query) { [weak self] result in
            switch result {
            case .success(let graphQLResult):
                self?.posts = graphQLResult.data?.posts ?? []
                // 화면 업데이트 로직 작성
            case .failure(let error):
                // 에러 처리
            }
        }
    }
}

위 코드는 fetch 대신 watch 메서드를 사용하여 데이터를 가져오고, 데이터 변경시에도 자동으로 새로운 결과를 받아옵니다.

이제 아폴로 서버와의 반응형 UI를 구현하는 방법을 알았습니다. 이를 통해 서버와 효율적인 데이터 통신을 할 수 있고, 데이터 변경에 따라 자동으로 화면을 업데이트할 수 있습니다.