借助 GraphQL 简化离线应用程序的开发

# 添加一个 graphql schema 到 amplify/backend/api/amplifyDatasource/schema.graphqlecho "enum PostStatus {  ACTIVE  INACTIVE}
type Post @model {  id: ID!  title: String!  comments: [Comment] @connection(name: "PostComments")  rating: Int!  status: PostStatus!}type Comment @model {  id: ID!  content: String  post: Post @connection(name: "PostComments")}" > amplify/backend/api/amplifyDatasource/schema.graphql
# 安装依赖项 npm i @aws-amplify/core @aws-amplify/DataStore @aws-amplify/pubsub
# 生成代表模型的源代码 npm run amplify-modelgen
# 在云中创建 API npm run amplify-push

# 下载简单的 react 应用程序curl -o src/App.js https://raw.githubusercontent.com/sebsto/amplify-datastore-js-e2e/master/src/App.js
# 启动应用程序 npm run start

function onCreate() {  DataStore.save(    new Post({      title: `New title ${Date.now()}`,      rating: 1,      status: PostStatus.ACTIVE    })  );}
function onDeleteAll() {  DataStore.delete(Post, Predicates.ALL);}
async function onQuery(setPosts) {  const posts = await DataStore.query(Post, c => c.rating("gt", 4));  setPosts(posts)}
async function listPosts(setPosts) {  const posts = await DataStore.query(Post, Predicates.ALL);  setPosts(posts);}

aws dynamodb scan --table-name Post-raherug3frfibkwsuzphkexewa-amplify \                   --filter-expression "#deleted <> :value"            \                   --expression-attribute-names '{"#deleted" : "_deleted"}' \                   --expression-attribute-values '{":value" : { "BOOL": true} }' \                   --query "Count"
5 // <= there are now 5 non deleted items in the table !

const subscription = DataStore.observe(Post).subscribe(msg => {  console.log(msg.model, msg.opType, msg.element);  listPosts(setPosts);});

query ListPost {  listPosts(limit: 10) {    items {      id      title      status      rating      _version    }  }}

mutation UpdatePost {  updatePost(input: {    id: "7d80688f-898d-4fb6-a632-8cbe060b9691"    title: "updated title 13:56"    status: ACTIVE    rating: 7    _version: 1  }) {    id    title    status    rating    _lastChangedAt    _version    _deleted      }}

aws dynamodb scan --table-name Post-raherug3frfibkwsuzphkexewa-amplify \                   --filter-expression "#deleted <> :value"            \                   --expression-attribute-names '{"#deleted" : "_deleted"}' \                   --expression-attribute-values '{":value" : { "BOOL": true} }' \                   --query "Count"
0 // <= all the items have been deleted !

{   "_version": 1,   "id": "25",   "rating": 6,   "status": "ACTIVE",   "title": "DataStore is Available"}```         | Alice 更新了 `rating`：
Json

同时 Bob 更新了 `title`：
Json

Json

自动合并会根据 GraphQL schema 中定义的类型信息，严格定义字段级别的合并规则。例如，`List` 和 `Map` 将会合并，相互冲突的标量更新（例如数值与字符串）将会导致保留服务器上现有的值。开发人员可以选择其他冲突解决策略：开放式并发（冲突的更新将被拒绝）或自定义（调用 [](https://amazonaws-china.com/lambda/) 函数来决定哪种版本是正确版本）。您可以使用 `amplify update api` 来选择冲突解决策略。有关这些不同策略的更多信息，请参阅 AppSync [](http://docs.aws.amazon.com/appsync/latest/devguide/conflict-detection-and-sync.html#conflict-detection-and-resolution)。
此实例的完整源代码可从[](https://github.com/sebsto/amplify-datastore-js-e2e)获取。此应用程序的代码不到 100 行，其中 20% 仅与 UI 有关。请注意我没有编写任何一行的 GraphQL 代码，这一切都是在 Amplify DataStore 中发生的。
Amplify DataStore 云后端现已在所有提供 [](https://amazonaws-china.com/appsync/) 的 AWS 区域开放，在本文执笔之时包括：美国东部（弗吉尼亚北部）、美国东部（俄亥俄）、美国西部（俄勒冈）、亚太地区（孟买）、亚太地区（首尔）、亚太地区（新加坡）、亚太地区（悉尼）、亚太地区（东京）、欧洲（法兰克福）、欧洲（爱尔兰）和欧洲（伦敦）。
在您的应用程序中使用 Amplify DataStore 不会产生额外的费用，您只需为您使用的后端资源付费，例如 AppSync 和 DynamoDB（有关定价详细信息请参阅[](https://amazonaws-china.com/appsync/pricing/)和[](https://amazonaws-china.com/dynamodb/pricing/on-demand/)）。这两种服务都提供[](https://amazonaws-china.com/free)，以便您了解和免费试用。
[](https://aws-amplify.github.io/docs/js/datastore) 让您可以专注于应用程序的商业价值，无需编写无差异化价值的代码。我迫不及待想看到大家使用它构建的杰出应用程序。
**本文转载自AWS技术博客。**
**原文链接：https://amazonaws-china.com/cn/blogs/china/amplify-datastore-simplify-development-of-offline-apps-with-graphql/**