はじめに
今回は、AmplifyのAPI設定後、Nuxt.jsのアプリケーション内でどのように利用しているかを中心に書いていきます。
Nuxt.jsの構成
基本的にDB取得のAPIの呼び出しはstoreのactionでのみ行っています。取得したDBデータをmutationでstateに書込み、必要に応じてgettersから取得する形にしています。
準備
store/index.js
の上部に以下を宣言します。
import { API, graphqlOperation } from 'aws-amplify'
import * as gqlQueries from '../graphql/queries' // read
import * as gqlMutations from '../graphql/mutations' // create, update, delete
import * as gqlSubscriptions from '../graphql/subscriptions' // 監視
importしたこれらを使っていくことで、CRUDの実行とデータの監視を行うことができます。
API設定時に、自動生成されるgraphql
フォルダ内には、3つのファイルが作られており、その中に記載されているAppSyncを実行するqueryやmutationを使っていきます。
以下、user情報を取得することを例に解説していきます。
Queries
getUser
idを指定してユーザーの情報を取得します。まず、queris.js
には以下のように定義されているので、index.js
から以下のように呼び出すことで、user情報が取得できます。
export const getUser = `query GetUser($id: ID!) {
getUser(id: $id) {
id
name
age
createdAt
updatedAt
}
}
`
const user = await API.graphql(
graphqlOperation(gqlQueries.getUser, {
id: 'tanaka' // userテーブルの取得したいデータのID
})
)
const userData = user.data.getUser // ユーザーのDB情報
返り値
以下のように取得しますが、GraphQLで取得したデータは様々な情報を含んだオブジェクトで返ってくるため、user.data.getUser
とすることで、実際にほしいユーザー情報を取得できます。
補足
基本的には、自動生成されたgraphqlに加工を加えたものを利用していますが、イレギュラーで必要な値だけ取得したいときは、以下のようqueryを自分で宣言した取得もできます。
// 例:IDがkatoのニックネームだけの情報が欲しい場合
// クエリを個別に宣言
const _query = `query GetUser($id: ID!) {
getUser(id: $id) {
name
}
}
`
// 実行
const user = await API.graphql(
graphqlOperation(_query, {id : 'tanaka'})
)
const userData = user.data.getUser // name情報のみが入っています。
listUsers
ユーザーの一覧情報を取得したいときは、queris.js
に宣言されているlistを使います。
export const listUsers = `query ListUsers(
$filter: ModelUserFilterInput
$limit: Int
$nextToken: String
) {
listUsers(filter: $filter, limit: $limit, nextToken: $nextToken) {
items {
id
name
age
createdAt
updatedAt
}
nextToken
}
}
`
const users = await API.graphql(
graphqlOperation(gqlQueries.listUsers)
)
const usersList = users.data.listUsers.items
返り値
listの場合は、const usersList = users.data.listUsers.items
にすることで、user情報をlist型で取得することができます。
filter
filter
を宣言することで、返り値をフィルタリングすることができます。filterの特徴として、データはすべて取得した上で、返り値にフィルタリングをかけるだけのため、データの取得コストには差はありません。(SQLのクエリで必要な情報だけ取得するのとは違う)
limit
取得するデータの個数です。指定しない場合のデフォルト値は10(多分)となっています。スキーマ設計時にソートキーを指定してない場合は、sortの順番としては、IDのアルファベット順で返ってきます。
nextToken
次のデータの取得するためのトークン情報です。例えば、100個データがあって、はじめの10個を取得して、次の10個のデータを取得したい場合は、はじめの10個のデータを取得した際のnextTokenを次の10このデータを取得するquery内に引きすとして渡すことで、次の10個のデータが取得できます。
Mutations
createUser
createは以下のように行います。
export const createUser = `mutation CreateUser($input: CreateUserInput!) {
createUser(input: $input) {
id
name
createdAt
updatedAt
}
}
`
const user = await API.graphql(
graphqlOperation(gqlMutations.createUser, {
input: {
name: '田中太郎',
}
})
const userData = user.data.createUser // createしたユーザー情報
返り値
mutations.js
で宣言したものが、返り値として返ってきます。
id
idについては、graphqlのスキーマで IDを設定している場合は、自動で一意なIDを勝手に書き込んでくれます。IDを設定していない場合は、値を渡す必要があります。
createdAt, updateAt
自動で入力してくれます。便利ですね。別記事で詳細はまとめる予定ですが、@keyでソートキーに指定する場合は、自動入力の機能は使えないので注意が必要です。(ソートキーに設定するためにnon-nullにする必要があり、non-nullの場合は自動入力の機能が使えないため)
updateUser
updateしたいデータのIDとupdateしたい情報を渡すだけで更新が可能です。
export const updateUser = `mutation UpdateUser($input: UpdateUserInput!) {
updateUser(input: $input) {
id
name
createdAt
updatedAt
}
}
`
// 例:
const user = await API.graphql(
graphqlOperation(gqlMutations.updateUser, {
input: {
id: 'tanaka',
name: '田中次郎'
}
})
)
const userData = user.data.updateUser // 更新したユーザー情報
返り値
updateした情報だけが返ってくるのではなく、mutation.js
内で宣言したデータがすべて返り値として返ってきます。
deleteUser
削除も簡単で、削除したいデータのIDを渡すだけで実行できます。nameだけ削除したいなどのカラム指定の削除はできません。
export const deleteUser = `mutation DeleteUser($input: DeleteUserInput!) {
deleteUser(input: $input) {
id
name
createdAt
updatedAt
}
}
`
const user = await API.graphql(
graphqlOperation(gqlMutations.deleteAnswer, {
input: { id: 'tanaka' }
})
)
const userData = user.data.deleteAnswer // 削除したユーザー情報
返り値
deleteしたuser情報のmutation.js
内で宣言したデータがすべて返り値として返ってきます。
Subscriptions
onCreateUser,onUpdateUser,onDeleteUser
それぞれ、user情報のcreate、update、deleteを検知してそのユーザー情報を取得できます。
現在作成しているサービスでは、リアルタイム性は求められていないので、未検証な部分です。
おわりに
これで、最低限の基本的なCRUDはできるようになったかと思います。AmplifyのAPIの肝はここではなく、スキーマ設定での @model、@auth、@key、@connection
などが何よりも重要になってきますので、そのあたりについては別記事で詳しくまとめていきたいと思います。
関連記事
AWS amplify フレームワークの使い方Part1〜Auth設定編〜
AWS Amplify フレームワークの使い方Part2〜Auth実践編〜
AWS Amplify フレームワークの使い方Part3〜API設定編〜
AWS Amplify フレームワークの使い方Part5〜GraphQL Transform @model編〜
[AWS Amplify フレームワークの使い方Part6〜GraphQL Transform @auth編〜]
(https://qiita.com/too/items/fae2879ea36f00c3ae10)
[AWS Amplify フレームワークの使い方Part7〜GraphQL Transform @key編〜]
(https://qiita.com/too/items/cb1dfb4f44536a3e9855)
AWS Amplify フレームワークの使い方Part8〜GraphQL Transform @connection編〜
AWS Amplify フレームワークの使い方Part9〜Function 基礎編〜
AWS Amplify フレームワークの使い方Part10〜Storage編〜
AWS Amplify フレームワークの使い方Part11〜Function 権限管理編〜
AWS Amplify フレームワークの使い方Part12〜ENV編〜
[AWS Amplify フレームワークの使い方Part13〜Auth 設定更新編〜]
(https://qiita.com/too/items/52f35860bcb5bdf5e667)
[AWS Amplify フレームワークの使い方Part14〜Lambda レイヤー編〜]
(https://qiita.com/too/items/54de781085bd9a3a66d0)