NodeJS クライアントアプリを作成する - AWS AppSync

NodeJS クライアントアプリを作成する

クライアントアプリケーションを作成するために AWS AppSync は Apollo GraphQL クライアント と統合されます。AWS では、オフラインサポート、認証、およびサブスクリプションハンドシェイキング用の Apollo プラグインを用意しています。このチュートリアルでは、Node.js アプリケーションで AWS AppSync SDK と Apollo クライアントを直接使用する方法について説明します。

注意: AWS Lambda 関数の場合は、AppSync クライアントコンストラクターで fetchPolicy: 'network-only'disableOffline: true を必ず設定してください。

開始する前に

このチュートリアルでは、GraphQL スキーマは次の構造であると仮定します。

schema { query: Query mutation: Mutation subscription: Subscription } type Mutation { addPost(id: ID! author: String! title: String content: String url: String): Post! updatePost(id: ID! author: String! title: String content: String url: String ups: Int! downs: Int! expectedVersion: Int!): Post! deletePost(id: ID!): Post! } type Post { id: ID! author: String! title: String content: String url: String ups: Int downs: Int version: Int! } type Query { allPost: [Post] getPost(id: ID!): Post } type Subscription { newPost: Post @aws_subscribe(mutations:["addPost"]) }

このスキーマは DynamoDB リゾルバーのチュートリアルで使用するものにサブスクリプションを追加したものです。完全なフローを実行するには、必要に応じてそのチュートリアルを先に実行します。DynamoDB を使用可能とするなど、GraphQL リゾルバーをさらにカスタマイズする場合には、「リゾルバーのマッピングテンプレートリファレンス」を参照してください。

GraphQL API エンドポイントを取得する

GraphQL API を作成した後、API エンドポイント (URL) を取得する必要があります。それをクライアントアプリケーションで使用できます。次のいずれかの方法で API エンドポイントを取得できます。

  • AWS AppSync コンソールで、[設定] を選択します。API の URL が [API Details (API の詳細)] セクションに表示されます。

  • 次の CLI コマンドを実行します。

aws appsync get-graphql-api --api-id $GRAPHQL_API_ID

次の手順でクライアント認証に AWS_IAM を使用する方法を示します。コンソールの左側で [設定] を選択し、[AWS_IAM] をクリックします。

クライアントアプリケーションの作成

次のように、新しいプロジェクトを作成し、npm を使用して初期化し、デフォルト値を受け入れます。

mkdir appsync && cd appsync touch index.js aws-exports.js npm init

AWS AppSync では、いくつかの認証タイプをサポートしています。詳細については、「セキュリティ」を参照してください。Amazon Cognito フェデレーテッドアイデンティティまたは Amazon Cognito ユーザープールから有効期限の短い認証情報を使用することをお勧めします。サンプル目的として、IAM キーを使用する方法を示します。aws-exports ファイルは次のようになります。

"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var config = { AWS_ACCESS_KEY_ID: '', AWS_SECRET_ACCESS_KEY: '', HOST: 'URL.YOURREGION.amazonaws.com', REGION: 'YOURREGION', PATH: '/graphql', ENDPOINT: '', }; config.ENDPOINT = "https://" + config.HOST + config.PATH; exports.default = config;

package.json 依存関係ファイルを編集します。次の項目が含まれることを確認します。

"dependencies": { "apollo-cache-inmemory": "^1.1.0", "apollo-client": "^2.0.3", "apollo-link": "^1.0.3", "apollo-link-http": "^1.2.0", "aws-sdk": "^2.141.0", "aws-appsync": "^1.0.0", "es6-promise": "^4.1.1", "graphql": "^0.11.7", "graphql-tag": "^2.5.0", "isomorphic-fetch": "^2.2.1", "ws": "^3.3.1" }

注意: "ws": "^3.3.1" を必ず使用してください。使用しないと、WebSocket エラーが発生します。また、AWS Lambda 関数で WebSocket の機能を使用することはできません。GraphQL のクエリとミューテーションのみを使用できます。

コマンドラインから、以下を実行します。

npm install

ここで次のコードを index.js ファイルに追加します。

注意: AWS Lambda 関数でこのサンプルを使用している場合は、コメントを解除して client.query({ query: query, fetchPolicy: 'network-only' }) ステートメントを使用する必要があります。AppSync クライアントコンストラクターで disableOffline: true のコメントを外す必要もあります。

"use strict"; /** * This shows how to use standard Apollo client on Node.js */ global.WebSocket = require('ws'); require('es6-promise').polyfill(); require('isomorphic-fetch'); // Require exports file with endpoint and auth info const aws_exports = require('./aws-exports').default; // Require AppSync module const AUTH_TYPE = require('aws-appsync/lib/link/auth-link').AUTH_TYPE; const AWSAppSyncClient = require('aws-appsync').default; const url = aws_exports.ENDPOINT; const region = aws_exports.REGION; const type = AUTH_TYPE.AWS_IAM; // If you want to use API key-based auth const apiKey = 'xxxxxxxxx'; // If you want to use a jwtToken from Amazon Cognito identity: const jwtToken = 'xxxxxxxx'; // If you want to use AWS... const AWS = require('aws-sdk'); AWS.config.update({ region: aws_exports.REGION, credentials: new AWS.Credentials({ accessKeyId: aws_exports.AWS_ACCESS_KEY_ID, secretAccessKey: aws_exports.AWS_SECRET_ACCESS_KEY }) }); const credentials = AWS.config.credentials; // Import gql helper and craft a GraphQL query const gql = require('graphql-tag'); const query = gql(` query AllPosts { allPost { __typename id title content author version } }`); // Set up a subscription query const subquery = gql(` subscription NewPostSub { newPost { __typename id title author version } }`); // Set up Apollo client const client = new AWSAppSyncClient({ url: url, region: region, auth: { type: type, credentials: credentials, } //disableOffline: true //Uncomment for AWS Lambda }); client.hydrated().then(function (client) { //Now run a query client.query({ query: query }) //client.query({ query: query, fetchPolicy: 'network-only' }) //Uncomment for AWS Lambda .then(function logData(data) { console.log('results of query: ', data); }) .catch(console.error); //Now subscribe to results const observable = client.subscribe({ query: subquery }); const realtimeResults = function realtimeResults(data) { console.log('realtime data: ', data); }; observable.subscribe({ next: realtimeResults, complete: console.log, error: console.log, }); });

前の例で API キーまたは Amazon Cognito ユーザープールを使用する場合、次のように AUTH_TYPE を更新できます。

const type = AUTH_TYPE.API_KEY const type = AUTH_TYPE.AMAZON_COGNITO_USER_POOLS

必要に応じて、キーまたは JWT トークンを入力する必要があります。