Need to configure your backend?See Build a Backend →

AWS AppSync Apollo Extensions

AWS AppSync Apollo Extensionsは、Apollo Clientというオープンソースの GraphQL クライアントを使用して AWS AppSync バックエンドにシームレスに接続する方法を提供します。

Apollo の詳細については、https://www.apollographql.com/docs/ios/ を参照してください。

機能

AWS AppSync Apollo Extensions は、Apollo クライアントで使用される AWS AppSync オーサライザーを提供し、GraphQL 操作に正しい認可ペイロードを簡単に適用できます。

さらに、含まれている Amplify コンポーネントにより、Amplify は認可トークンと対応する Authorizer の署名ロジックを提供できます。

AWS AppSync Apollo Extensions ライブラリをインストールする

Swift Package Manager を使用してプロジェクトに AWS AppSync Apollo Extensions を追加します。

GitHub URL (https://github.com/aws-amplify/aws-appsync-apollo-extensions-swift) を入力し、Up to Next Major Version を選択して、Add Package をクリックします。

以下のライブラリを選択します：
- AWSAppSyncApolloExtensions

Apollo クライアントを使用して AWS AppSync に接続する

AWS AppSync は以下の認可モードをサポートしています：

API_KEY

import AWSAppSyncApolloExtensions
let authorizer = APIKeyAuthorizer(apiKey: "[API_KEY]")
let interceptor = AppSyncInterceptor(authorizer)

AMAZON_COGNITO_USER_POOLS

Amplify Auth を使用している場合は、Cognito アクセストークンを取得するメソッドを作成できます。

import Amplify
func getUserPoolAccessToken() async throws -> String {
    let authSession = try await Amplify.Auth.fetchAuthSession()
    if let result = (authSession as? AuthCognitoTokensProvider)?.getCognitoTokens() {
        switch result {
        case .success(let tokens):
            return tokens.accessToken
        case .failure(let error):
            throw error
    throw AuthError.unknown("Did not receive a valid response from fetchAuthSession for get token.")

次に、このメソッドを使用して AuthTokenAuthorizer を作成します。

import AWSAppSyncApolloExtensions
let authorizer = AuthTokenAuthorizer(fetchLatestAuthToken: getUserPoolAccessToken)
let interceptor = AppSyncInterceptor(authorizer)

AWS_IAM

Amplify Auth を使用している場合は、AWS_IAM 認可用に以下のメソッドを使用できます。

import AWSCognitoAuthPlugin
import AWSAppSyncApolloExtensions
let authorizer = IAMAuthorizer(
    signRequest: AWSCognitoAuthPlugin.createAppSyncSigner(
        region: "[REGION]"))

Amplify Data を Apollo クライアントに接続する

開始する前に、Amplify Data バックエンドのデプロイが必要です。開始するには、Set up Data を参照してください。

バックエンドをデプロイして amplify_outputs.json ファイルを作成したら、以下の手順で Amplify ライブラリを使用して設定値を読み取って取得できます：

GitHub URL (https://github.com/aws-amplify/amplify-swift) を入力し、Up to Next Major Version を選択して、Add Package をクリックします。
以下のライブラリを選択します：
1. AWSPluginsCore
amplify_outputs.json ファイルを Xcode プロジェクトにドラッグアンドドロップします。
try AWSAppSyncConfiguration(with: .amplifyOutputs) を使用して設定を初期化します。

結果の設定オブジェクトには、endpoint、region、およびオプションの apiKey. が含まれます。以下の例は、メインバンドルから amplify_outputs.json ファイルを読み取り、設定を使用して API_Key 認可用の Apollo クライアントを設定する方法を示しています。

import Apollo
import ApolloAPI
import AWSPluginsCore
import AWSAppSyncApolloExtensions
func createApolloClient() throws -> ApolloClient {
   let store = ApolloStore(cache: InMemoryNormalizedCache())
    // 1. Read AWS AppSync API configuration from `amplify_outputs.json`
    let configuration = try AWSAppSyncConfiguration(with: .amplifyOutputs)
   // 2. Use `configuration.apiKey` with APIKeyAuthorizer
    let authorizer = APIKeyAuthorizer(apiKey: configuration.apiKey ?? "")
    let interceptor = AppSyncInterceptor(authorizer)
    let interceptorProvider = DefaultPrependInterceptorProvider(interceptor: interceptor,
   // 3. Use `configuration.endpoint` with RequestChainNetworkTransport
    let transport = RequestChainNetworkTransport(interceptorProvider: interceptorProvider,
                                                endpointURL: configuration.endpoint)
    return ApolloClient(networkTransport: transport, store: store)

AWS AppSync Apollo Extensions ライブラリは、スキーマで使用されている可能性のあるさまざまな認可戦略に対応した多くの Authorizer クラスを提供します。認可戦略に対応する適切な Authorizer タイプを選択する必要があります。戦略と対応する認可モードの詳細については、利用可能な認可戦略を参照してください。

一般的なものは以下の通りです

publicAPIkey 戦略、apiKey 認可モード、APIKeyAuthorizer
guest 戦略、identityPool 認可モード、IAMAuthorizer
owner 戦略、userPool 認可モード、AuthTokenAuthorizer

スキーマ内で複数の認可戦略を定義する場合、アプリで使用する各 Authorizer に対して個別の Apollo クライアントインスタンスを作成する必要があります。

AWS AppSync スキーマをダウンロードする

スキーマは Apollo のコード生成ツールによって使用され、GraphQL 操作を実行するのに役立つ API コードを生成します。以下の手順では、AppSync スキーマを Apollo のコード生成プロセスと統合します：

AWS AppSync コンソールでお使いの API に移動します。
左側で Schema を選択します。
Export schema ドロップダウンを選択し、schema.json ファイルをダウンロードします。
Apollo Code Generation ドキュメントで指示されたとおり、このファイルをプロジェクトに追加します。

または、amplify-ios-cli ツールで fetch-schema コマンドを使用して、内省スキーマをダウンロードできます。

Apollo クライアント用のクエリ、ミューテーション、サブスクリプションを生成する

AWS AppSync コンソールでお使いの API の Queries タブに移動します。ここで、GraphQL プレイグラウンドでクエリ、ミューテーション、サブスクリプションをテストできます。
エディターに GraphQL 操作（クエリ、ミューテーション、またはサブスクリプション）を入力し、Run をクリックして実行します。
結果でリクエストとレスポンスの構造を確認します。これにより、Apollo が使用する正確な呼び出しパターンと構造を理解できます。
プレイグラウンドから GraphQL 操作をコピーし、Apollo のコード生成ツールに渡して、プロジェクト用の対応する API コードを自動生成します。

AWS AppSync リアルタイムエンドポイントに接続する

以下の例は、AWS AppSync を使用して GraphQL サブスクリプション操作を実行できる Apollo クライアントを作成する方法を示しています。

import Apollo
import ApolloAPI
import ApolloWebSocket
import AWSPluginsCore
import AWSAppSyncApolloExtensions
func createApolloClient() throws -> ApolloClient {
    let store = ApolloStore(cache: InMemoryNormalizedCache())
    let configuration = try AWSAppSyncConfiguration(with: .amplifyOutputs)
    // 1. Create your authorizer
    let authorizer = /* your Authorizer */
    let interceptor = AppSyncInterceptor(authorizer)
    let interceptorProvider = DefaultPrependInterceptorProvider(interceptor: interceptor,
    let transport = RequestChainNetworkTransport(interceptorProvider: interceptorProvider,
                                                    endpointURL: configuration.endpoint)
    // 2. Create the AWS AppSync compatible websocket client
    let websocket = AppSyncWebSocketClient(endpointURL: configuration.endpoint,
                                            authorizer: authorizer)
    // 3. Add it to the WebSocketTransport
    let webSocketTransport = WebSocketTransport(websocket: websocket)
    // 4. Create a SplitNetworkTransport
    let splitTransport = SplitNetworkTransport(
        uploadingNetworkTransport: transport,
        webSocketNetworkTransport: webSocketTransport
    // 5. Pass the SplitNetworkTransport to the ApolloClient
    return ApolloClient(networkTransport: splitTransport, store: store)