首先

最近，Amplify DataStore已经发布了。你可以在官方博客上了解详细信息，但是我简单尝试了一下，感觉不需要编写GraphQL也可以使用GraphQL。接下来，我将与以前使用Amplify和AppSync(GraphQL)的方法进行比较并进行解释（参考文章）。

开始使用

首先，让我们创建一个Vue项目。

$ npm install -g @vue/cli
$ vue create amplify-datastore-sample
$ cd amplify-datastore-sample

进行amplify的初始化等操作

$ npx amplify-app

当处理完成时，将生成一个名为amplify的目录。该目录内包含了Amplify使用的AWS服务信息。
我们将修改amplify/backend/api/<数据源名称>/schema.graphql文件的内容。

enum PostStatus {
  ACTIVE
  INACTIVE
}

type Post @model {
  id: ID!
  title: String!
  rating: Int!
  status: PostStatus!
}

我将部署到AWS的环境中。

$ npm run amplify-modelgen

执行后将部署AppSync和DynamoDB。这样AWS方面的准备工作就完成了。

设置

我会安装所需的软件包。

$ npm i @aws-amplify/core @aws-amplify/datastore

将安装的软件包导入。
当运行 npm run amplify-modelgen 时，models 目录会在 src 目录下生成。

import { DataStore } from "@aws-amplify/datastore"
import { Post, PostStatus } from "./models"

保存数据

在写入数据时，使用DataStore.save()函数。

await DataStore.save(
  new Post({
    title: "My First Post",
    rating: 10,
    status: PostStatus.ACTIVE
  })
)

如果用GraphQL写的话…

const saveBody = `
  mutation {
    putData(
      input: {
        title: "My First Post",
        rating: 10,
        status: "active"
      }
    )
  }
`
await API.graphql(graphqlOperation(saveBody))

查询数据

在获取数据时，使用 DataStore.query() 方法。

const posts = await DataStore.query(Post)

也可以指定限制或条件。

await DataStore.query(
  Post,
  c => c.status("eq", PostStatus.ACTIVE),
  {
    limit: 10
  }
)

用GraphQL写的话……

const queryBody = `
  query {
    queryData(limit: 10){
      items {
        id,
        title,
        rating,
        status
      }
    }
  }
`
const posts = await API.graphql(graphqlOperation(queryBody))

删除数据

在删除数据时，可以使用 DataStore.delete() 方法。

const todelete = await DataStore.query(Post, "1234567")
await DataStore.delete(todelete)

如果用GraphQL写的话，

const deleteBody = `
  mutation {
    deleteData(
      input: {
        id: "1234567"
      }
    )
  }
`
await API.graphql(graphqlOperation(deleteBody))

最后

使用GraphQL的查询代码量会增加，生成查询语句也会变得繁琐。但是，使用AmplifyDataStore可以解决这些问题。虽然需要处理身份验证等方面的内容才能在生产环境中使用，但它似乎非常值得使用。再见！