v5 から v6 への移行
v6 の多くのカテゴリと同様に、API (REST) はバンドルサイズを維持し、ツリーシェイキングを向上させるために、関数型アプローチに移行しました。また、明確性と一貫性のために、名前付きパラメータと厳密な型付けを使用しています。
v6 REST API の場合、すべての API は同じ基本的な入力/出力型を使用しますが、delete と head はどちらも body オプションを省略します。
注: v5 で
responseをtrueに設定すると、ヘッダーを含む完全なレスポンスオブジェクトが返されます。responseがfalseに設定されているかundefinedのままの場合、ライブラリは JSON レスポンスから解析された JS オブジェクトを返します。v6 では、戻りオブジェクトの構造は常に同じです。(Output を展開して詳細を確認してください)
入力
入力
V5
apiName: stringpath: stringinit: { // actually { [key: string]: any }, but the values below are expected headers?: { [key: string]: any }; body?: any; response?: boolean; queryStringParameters?: { [key: string]: any }; withCredentials?: boolean; // allow cross-site Access-Control requests with credentials}V6
input: { apiName: string; path: string; options?: { headers?: { [x: string]: string; }; queryParams?: Record<string, string>; body?: DocumentType | FormData; withCredentials?: boolean; // allow cross-site Access-Control requests with credentials };}出力
出力
V5
// `response`: true// response object interface conforming to Axios library{ data: any status: number; statusText: string; headers: AxiosResponseHeaders; config: InternalAxiosRequestConfig; request: any}
// `response`: false || undefined// JSON response deserialized into an object{ [key: string]: any }V6
{ response: Promise<RestApiResponse>; cancel: (abortMessage?: string) => void;};
// RestApiResponse{ body: { blob: () => Promise<Blob>; json: () => Promise<DocumentType>; // Type representing a plain JavaScript object that can be serialized to JSON. text: () => Promise<string>; }; statusCode: number; headers: Headers;}API.get
import { get } from 'aws-amplify/api';
const handleGet = async ({ apiName, path, headers, queryParams}: { apiName: string, path: string, headers: { [key: string]: any }, queryParams: { [key: string]: any }}) => { const response = await get({ apiName, path, options: { headers, queryParams, } }).response;}import { API } from 'aws-amplify'
const handleGet = async ({ apiName, path, headers, queryParams}: { apiName: string, path: string, headers: { [key: string]: any }, queryParams: { [key: string]: any }}) => { const response = await API.get(apiName, path, { headers, // response: true, // add to get full axios details queryStringParameters: queryParams });}API.post
import { post } from 'aws-amplify/api';
const handlePost = async ({ apiName, path, headers, body, queryParams}: { apiName: string, path: string, headers: { [key: string]: any }, body: string, queryParams: { [key: string]: any }}) => { const response = await post({ apiName, path, options: { body, headers, queryParams } }).response;}import { API } from 'aws-amplify'
const handlePost = async ({ apiName, path, headers, body, queryParams}: { apiName: string, path: string, headers: { [key: string]: any }, body: string, queryParams: { [key: string]: any }}) => { const response = await API.post(apiName, path, { body, headers, queryStringParameters: queryParams });}API.put
import { put } from 'aws-amplify/api';
const handlePut = async ({ apiName, path, headers, body, queryParams}: { apiName: string, path: string, headers: { [key: string]: any }, body: string, queryParams: { [key: string]: any }}) => { const response = await put({ apiName, path, options: { body, headers, queryParams } }).response;}import { API } from 'aws-amplify'
const handlePost = async ({ apiName, path, headers, body, queryParams}: { apiName: string, path: string, headers: { [key: string]: any }, body: string, queryParams: { [key: string]: any }}) => { const response = await API.put(apiName, path, { body, headers, queryStringParameters: queryParams });}API.del
import { del } from 'aws-amplify/api';
const handleDelete = async ({ apiName, path, headers, queryParams}: { apiName: string, path: string, headers: { [key: string]: any }, queryParams: { [key: string]: any }}) => { const response = await del({ apiName, path, options: { headers, queryParams } }).response;}import { API } from 'aws-amplify'
const handlePost = async ({ apiName, path, headers, queryParams}: { apiName: string, path: string, headers: { [key: string]: any }, queryParams: { [key: string]: any }}) => { const response = await API.del(apiName, path, { headers, queryStringParameters: queryParams });}API.patch
import { patch } from 'aws-amplify/api';
const handlePatch = async ({ apiName, path, headers, body, queryParams}: { apiName: string, path: string, headers: { [key: string]: any }, body: string, queryParams: { [key: string]: any }}) => { const response = await patch({ apiName, path, options: { body, headers, queryParams } }).response;}import { API } from 'aws-amplify'
const handlePatch = async ({ apiName, path, headers, body, queryParams}: { apiName: string, path: string, headers: { [key: string]: any }, body: string, queryParams: { [key: string]: any }}) => { const response = await API.patch(apiName, path, { body, headers, queryStringParameters: queryParams });}API.head
import { head } from 'aws-amplify/api';
const handleHead = async ({ apiName, path, headers, queryParams}: { apiName: string, path: string, headers: { [key: string]: any }, queryParams: { [key: string]: any }}) => { const response = await head({ apiName, path, options: { headers, queryParams } }).response;}import { API } from 'aws-amplify'
const handleHead = async ({ apiName, path, headers, queryParams}: { apiName: string, path: string, headers: { [key: string]: any }, queryParams: { [key: string]: any }}) => { const response = await API.head(apiName, path, { headers, queryStringParameters: queryParams });}API.cancel
リクエストをキャンセルするプロセスは v6 で変更されました。v5 では、プロミスを入力として API.cancel API に送信していました。v6 では、キャンセルは API(REST) 操作の結果で返される関数です。操作をキャンセルするには、operation.cancel() を呼び出します。
import { get, isCancelError } from 'aws-amplify/api'
const operation = get({ apiName, path, options});
operation.response.then(result => { // GET operation completed successfully}).catch(error => { // If the error is because the request was cancelled you can confirm here. if(isCancelError(error)) { // 'my message for cancellation' console.log(error.message); }})
// To cancel the above requestoperation.cancel('my message for cancellation');import { API } from 'aws-amplify'
const promise = API.get( apiName, path, options);
promise.then(result => { // GET operation completed successfully}).catch(error => { // If the error is because the request was cancelled you can confirm here. if(API.isCancel(error)) { // 'my message for cancellation' console.log(error.message); }});
// To cancel the above requestAPI.cancel(promise, 'my message for cancellation');