AppSyncのGraphQL APIを@apollo/clientで呼び出す

はじめに

AWS AppSyncのJavaScriptクライアントといえば、AWS AppSync JavaScript SDK です。AppSyncがサポートする認証などに対応していて Apollo Client ベースなので Apollo Client を使ったことがある人であればすんなり使い始められると思います。だた、ベースのバージョンがv2.4.6とちょっと古いため、最新の graphql-code-generator などのツールが生成するコードとバージョンが合わないので一緒に使えません。

この記事では、AppSyncの認証は使いたいけど、Apollo Clientも最新バージョンを使いたいという場合の対応方法を紹介します。

@apollo/clientにAppSync用のApolloLinkを組み込む¹

Apollo ClientにはApolloLinkというミドルウェアのような機能があり、ApolloLinkの構成しだいでカスタムの処理をApollo Clientに組み込むことができます。

AWS AppSync JavaScript SDK は ApolloLink の実装として以下のモジュールを単独で公開しています。

• aws-appsync-auth-link
• aws-appsync-subscription-link

こられのApolloLink実装を使うことで、@apollo/clientでAppSyncの認証とSubscriptionを利用することができます。

実際にコードは以下のようになります。

apolloClient.ts

import { createAuthLink, AuthOptions } from 'aws-appsync-auth-link';
import { createSubscriptionHandshakeLink } from 'aws-appsync-subscription-link';
import { ApolloClient, InMemoryCache, ApolloLink } from '@apollo/client/core';

import appSyncConfig from './aws-exports';

const url = appSyncConfig.aws_appsync_graphqlEndpoint;
const region = appSyncConfig.aws_appsync_region;
const auth: AuthOptions = {
  type: 'API_KEY',
  apiKey: appSyncConfig.aws_appsync_apiKey
};

const link = ApolloLink.from([
  createAuthLink({ url, region, auth }),
  createSubscriptionHandshakeLink({ url, region, auth })
]);

export const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache()
});

上記のコードとほぼ同じものが aws-mobile-appsync-sdk-jsのREADME に書かれています。しかし、サンプルのコードは@apollo/clientではなくapollo-clientを利用するコードになっているのでちょっとみただけでは@apollo/clientで使えるのか不安になりますが、これらの package.json の dependenciesには "@apollo/client": "^3.2.0" と書かれているので問題なく使えます。

注意点

• offline 機能はサポート外なので、どうしてもoffline機能が必要ならaws-mobile-appsync-sdk-js(apollo-clientの拡張)自体を利用する必要があります。
• aws-appsync-auth-link, aws-appsync-subscription-link を使い場合、Reactを利用していない場合でもreactを依存に追加しておかないとエラーが発生します。原因はこの2つのモジュールが @apollo/client のモジュールをインポートする際に @apollo/client/core ではなく @apollo/client としてしまっているのが原因です。Issue と Pull Request が出ているのでマージされればこのエラーは解消されると思います。

まとめ

AWS AppSync と @apollo/client は ApolloLink を構成することで問題なく利用できます(offline以外は)。graphql-code-generator などのツールも使えるようになるのでスキーマやクエリーなどからコードを生成して TypeScript の型を利用した開発をしたい場合でも安心です。

1. v2をapollo-client, v3を@apollo/clientと書いています。 ↩