AWS Amplify 框架的使用方法第4部分-实际应用API

2 年 ago
清, 扬
2 minutes

首先

本次将重点介绍在完成Amplify的API配置后，如何在Nuxt.js应用程序中使用。

Nuxt.js的配置

基本上，只有在store的action中调用数据库获取的API。将获取的数据库数据通过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' // 監視

通过使用导入的这些，可以执行CRUD操作并监视数据。
在API设置时，将在自动生成的graphql文件夹中创建三个文件，并使用其中的AppSync查询和变更来执行。

我們將以獲取用戶信息為例進行解釋。

查询

获取用户

使用指定的ID获取用户信息。首先，在queries.js文件中进行了以下定义，然后在index.js中通过以下方式调用，即可获取用户信息。

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情報のみが入っています。

列出用户

要获取用户的列表信息时，请使用在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”作为代码，以列表形式获取用户信息。

过滤

通过声明 filter ，可以过滤返回值。filter 的特点是在获取所有数据的基础上，只对返回值进行过滤，因此数据获取成本没有差异。（与在 SQL 查询中仅获取所需信息不同）

限制 zhì)

这是获取数据的数量。如果没有指定，默认值为10（大概）。如果在模式设计时没有指定排序键，则以ID的字母顺序返回。

下一个令牌

以下是用于获取下面数据的令牌信息。例如，假设有100个数据，您想要获取前10个数据，并获取下一个10个数据，您可以将获取前10个数据时获得的nextToken传递给获取下一个10个数据的查询，以便获取下一个10个数据。

突变

创建用户

使用英语进行翻译，您可以说：“创建的方法如下。” 或者 “创建的步骤如下。”

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したユーザー情報

返回值 huí zhí)

在mutations.js文件中声明的内容将作为返回值返回。

id- 只需要一个选项的话 , 用中文将下述内容 进行释义 :

身份证

如果在GraphQL模式中设置了ID，它将自动为您生成唯一的ID。如果没有设置ID，则需要传递一个值。

创建时间，更新时间

自动进行输入。很方便吧。尽管在另一篇文章中将详细概括，但是如果要以@key为排序键进行指定的话，就需要注意不能使用自动输入功能（因为需要将其设置为非空值以设定为排序键，而非空值的情况下无法使用自动输入功能）。

更新用户

只需提供要更新的数据的ID和要更新的信息即可实现更新。

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 // 更新したユーザー情報

返回值

不仅会返回更新的信息，还会将在mutation.js中声明的所有数据作为返回值返回。

删除用户

只需提供想要删除的数据的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 // 削除したユーザー情報

返回值

在mutation.js文件中，您将会得到已删除用户信息的所有声明数据作为返回值。

订阅

创建用户，更新用户，删除用户

您可以侦测到用户信息的创建、更新和删除，并获取这些用户信息。
由于我们目前构建的服务不需要实时性，因此这也是一个未经验证的部分。

最后

我认为现在我们已经可以做到最基本的CRUD操作了。Amplify的API的核心并不在这里，而是在模式设置中的@model、@auth、@key、@connection等方面，这些比任何其他东西都更重要。所以，我希望在另一篇文章中详细介绍这些内容。

相关文章

AWS Amplify框架的使用方法第1部分〜Auth设置篇〜
AWS Amplify框架的使用方法第2部分〜Auth实践篇〜
AWS Amplify框架的使用方法第3部分〜API设置篇〜
AWS Amplify框架的使用方法第5部分〜GraphQL转换@model篇〜
AWS Amplify框架的使用方法第6部分〜GraphQL转换@auth篇〜
AWS Amplify框架的使用方法第7部分〜GraphQL转换@key篇〜
AWS Amplify框架的使用方法第8部分〜GraphQL转换@connection篇〜
AWS Amplify框架的使用方法第9部分〜函数基础篇〜
AWS Amplify框架的使用方法第10部分〜存储篇〜
AWS Amplify框架的使用方法第11部分〜函数权限管理篇〜
AWS Amplify框架的使用方法第12部分〜环境设置篇〜
AWS Amplify框架的使用方法第13部分〜Auth设置更新篇〜
AWS Amplify框架的使用方法第14部分〜Lambda层篇〜

✖
广告
将在 10 秒后关闭
bannerAds