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

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

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

AWSAppSync はApollo GraphQL クライアントクライアントアプリケーションを作成するために。AWSは、オフラインサポート、認証、およびサブスクリプションハンドシェイキング用の Apollo プラグインを提供します。このチュートリアルでは、使用方法を示します。AWSNode.js アプリケーションで Apollo クライアントと AppSync SDK を使用できます。

注意: を使用する場合AWS Lambda関数を使用する場合は、fetchPolicy: 'network-only'だけでなく、disableOffline: trueをAppSyncクライアントコンストラクタで呼び出します。

開始する前に

このチュートリアルでは、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 エンドポイントを取得できます。

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

  • または、以下の CLI コマンドを実行します。をに置き換える$GRAPHQL_API_IDパラメータを API ID を指定する文字列で指定します。

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

AWSAppSync はいくつかの認証タイプをサポートしています。詳細については、」セキュリティ。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依存関係ファイルを作成し、以下を含めます。

"apollo-cache-inmemory" "apollo-client" "apollo-link" "apollo-link-http" "aws-sdk" "aws-appsync" "es6-promise" "graphql" "graphql-tag" "isomorphic-fetch" "ws"

注意: あなたは_*必要があります*_使用"ws": "^3.3.1"それ以外の場合は、WebSocket エラーが発生します。また、WebSocket の機能を使用することはできません。AWS Lambda関数の場合、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 トークンを入力する必要があります。