はじめに

今回は、AmplifyのAPI設定後、Nuxt.jsのアプリケーション内でどのように利用しているかを中心に書いていきます。

Nuxt.jsの構成

基本的にDB取得のAPIの呼び出しはstoreのactionでのみ行っています。取得したDBデータをmutationでstateに書込み、必要に応じてgettersから取得する形にしています。

準備

store/index.jsの上部に以下を宣言します。

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情報が取得できます。

graphql/queries.js

export const getUser = `query GetUser($id: ID!) {
  getUser(id: $id) {
    id
    name
    age
    createdAt
    updatedAt
  }
}
`

store/index.js

const user = await API.graphql(
  graphqlOperation(gqlQueries.getUser, {
    id: 'tanaka' // userテーブルの取得したいデータのID
  })
)
const userData = user.data.getUser // ユーザーのDB情報

返り値

以下のように取得しますが、GraphQLで取得したデータは様々な情報を含んだオブジェクトで返ってくるため、user.data.getUserとすることで、実際にほしいユーザー情報を取得できます。

補足

基本的には、自動生成されたgraphqlに加工を加えたものを利用していますが、イレギュラーで必要な値だけ取得したいときは、以下のようqueryを自分で宣言した取得もできます。

index.js

// 例：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を使います。

graghql/queris.js

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
  }
}
`

store/index.js

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は以下のように行います。

graghql/mutations.js

export const createUser = `mutation CreateUser($input: CreateUserInput!) {
  createUser(input: $input) {
    id
    name
    createdAt
    updatedAt
  }
}
`

store/index.js

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したい情報を渡すだけで更新が可能です。

graghql/mutations.js

export const updateUser = `mutation UpdateUser($input: UpdateUserInput!) {
  updateUser(input: $input) {
    id
    name
    createdAt
    updatedAt
  }
}
`

store/index.js

// 例：
const user = await API.graphql(
  graphqlOperation(gqlMutations.updateUser, {
    input: {
      id: 'tanaka',
      name: '田中次郎'
    }
  })
)
const userData = user.data.updateUser // 更新したユーザー情報

返り値

updateした情報だけが返ってくるのではなく、mutation.js内で宣言したデータがすべて返り値として返ってきます。

deleteUser

削除も簡単で、削除したいデータのIDを渡すだけで実行できます。nameだけ削除したいなどのカラム指定の削除はできません。

graghql/mutations.js

export const deleteUser = `mutation DeleteUser($input: DeleteUserInput!) {
  deleteUser(input: $input) {
    id
    name
    createdAt
    updatedAt
  }
}
`

store/index.js

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 フレームワークの使い方Part4〜API実践編〜

はじめに

Nuxt.jsの構成

準備

Queries

getUser

返り値

補足

listUsers

返り値

filter

limit

nextToken

Mutations

createUser

返り値

id

createdAt, updateAt

updateUser

返り値

deleteUser

返り値

Subscriptions

onCreateUser,onUpdateUser,onDeleteUser

おわりに

関連記事