{"id":13533272,"url":"https://github.com/dabit3/amplify-datastore-example","last_synced_at":"2025-11-17T15:29:12.384Z","repository":{"id":49906473,"uuid":"227289194","full_name":"dabit3/amplify-datastore-example","owner":"dabit3","description":"Example of basic app using Amplify DataStore","archived":false,"fork":false,"pushed_at":"2021-06-08T12:33:27.000Z","size":1220,"stargazers_count":78,"open_issues_count":6,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-10-09T09:58:56.791Z","etag":null,"topics":["aws-amplify","graphql","javascript","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dabit3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-11T06:06:21.000Z","updated_at":"2023-02-18T13:29:55.000Z","dependencies_parsed_at":"2022-09-22T00:32:20.982Z","dependency_job_id":null,"html_url":"https://github.com/dabit3/amplify-datastore-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dabit3/amplify-datastore-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Famplify-datastore-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Famplify-datastore-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Famplify-datastore-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Famplify-datastore-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dabit3","download_url":"https://codeload.github.com/dabit3/amplify-datastore-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Famplify-datastore-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284911403,"owners_count":27083422,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-17T02:00:06.431Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws-amplify","graphql","javascript","react"],"created_at":"2024-08-01T07:01:18.249Z","updated_at":"2025-11-17T15:29:12.367Z","avatar_url":"https://github.com/dabit3.png","language":"JavaScript","funding_links":[],"categories":["Example Projects"],"sub_categories":["Other blogs \u0026 tutorials"],"readme":"## Basic DataStore Example\n\nTo learn more about DataStore, check out [this talk](https://www.youtube.com/watch?v=KcYl6_We0EU) by Richard Threlkeld.\n\n- [Creating a new Amplify app with DataStore](https://github.com/dabit3/amplify-datastore-example#creating-a-new-amplify-app-using-datastore)\n- [Adding DataStore to an existing AppSync API](https://github.com/dabit3/amplify-datastore-example#adding-datastore-to-an-existing-graphql-api)\n\n### Creating a new Amplify app using DataStore\n\nThe fastest way to get started is using the amplify-app npx script such as with Create React app:\n\n```sh\n$ npx create-react-app amplify-datastore --use-npm\n$ cd amplify-datastore\n$ npx amplify-app@latest\n```\n\nOnce this completes open the GraphQL schema in the __amplify/backend/api/_datasourcename_/schema.graphql__. You can use the sample or the one below that will be used in this example:\n\n```graphql\nenum PostStatus {\n  ACTIVE\n  INACTIVE\n}\n\ntype Post @model {\n  id: ID!\n  title: String!\n  rating: Int!\n  status: PostStatus!\n}\n```\n\nNext, we'll run the model code generation from the GraphQL Schema:\n\n```sh\n$ npm run amplify-modelgen\n```\n\nNext, we'll install the dependencies:\n\n```sh\n$ npm i @aws-amplify/core @aws-amplify/datastore\n```\n\nThen, import the necessary dependencies in __src/App.js__:\n\n```js\nimport { DataStore, Predicates } from \"@aws-amplify/datastore\";\nimport { Post, PostStatus } from \"./models\";\n```\n\n#### At this point the app back end has _not_ been deployed, for now we will be working locally.\n\nNow, let's look at the different types of operations.\n\n### Saving data\n\n```js\nawait DataStore.save(\n  new Post({\n    title: `My First Post`,\n    rating: 10,\n    status: PostStatus.ACTIVE\n  })\n);\n```\n\n### Querying data\n\nQuery all data:\n\n```js\nconst posts = await DataStore.query(Post);\n```\n\nPassing in a limit:\n\n```js\nconst posts = await DataStore.query(Post, null, {\n  page: 0,\n  limit: 100\n});\n```\n\nQuery with a predicate.\n\nAvailable predicates:\n\n__Strings__: `eq | ne | le | lt | ge | gt | contains | notContains | beginsWith | between`\n\n```js\n// query greater than 4\nconst posts = await DataStore.query(Post, c =\u003e c.rating(\"gt\", 4));\n\n// query posts equal to \"My First Post\"\nconst posts = await DataStore.query(Post, c =\u003e c.title(\"eq\", \"My First Post\"));\n\n// chaining multiple commands\nconst posts = await DataStore.query(Post, c =\u003e c.rating(\"gt\", 4).status(\"eq\", PostStatus.ACTIVE));\n\n// query posts containing \"First\"\nconst posts = await DataStore.query(Post, c =\u003e c.title(\"contains\", \"First\"));\n```\n\n__Numbers__: `eq | ne | le | lt | ge | gt | between`\n\n__Lists__: `contains | notContains`\n\n### Updating data\n\nModels in DataStore are immutable. To update a record you must use the .copyOf function to apply updates to the item’s fields rather than mutating the instance directly:\n\n```js\nconst original = await DataStore.query(Post, \"123\");\n\nawait DataStore.save(\n\tPost.copyOf(original, updated =\u003e {\n\t\tupdated.status = PostStatus.ACTIVE\n\t})\n);\n```\n\n### Delete Data\n\nTo delete an item pass in an instance:\n\n```js\nconst todelete = await DataStore.query(Post, \"1234567\");\nDataStore.delete(todelete);\n```\n\nYou can also pass predicate operators to delete multiple items. For example will delete all inactive posts:\n\n```js\nawait DataStore.delete(Post, c =\u003e c.status(\"eq\", PostStatus.INACTIVE));\n```\n\nAdditionally you can perform a conditional delete, for instance only delete if a post is inactive by passing in an instance of a model:\n\n```js\nconst todelete = await DataStore.query(Post, \"123\");\nDataStore.delete(todelete, c =\u003e c.status(\"eq\", PostStatus.INACTIVE));\n```\n\n### Deploying the app back end\n\nTo deploy the app, initialize the back end:\n\n```sh\n$ amplify init\n```\n\nNext, deploy the service:\n\n```sh\n$ amplify push\n```\n\nOnce the app is deployed and you'd like to interact with the service, you first need to configure the JavaScript app to use the AWS credentials created by the CLI:\n\n```js\nimport Amplify from '@aws-amplify/core'\nimport config from './aws-exports'\nAmplify.configure(config)\n```\n\n### Observe Data\n\nYou can subscribe to changes on your Models by using `observe` in the DataStore API. This reacts dynamically to updates of data to the underlying Storage Engine, which could be the result of GraphQL Subscriptions as well as Queries or Mutations that run against the backing AppSync API if you are synchronizing with the cloud.\n\n```js\nconst subscription = DataStore.observe(Post).subscribe(msg =\u003e {\n  console.log(msg.model, msg.opType, msg.element);\n})\n```\n\n### Example app\n\n```js\nimport React, { useEffect, useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./App.css\";\n\nimport { DataStore, Predicates } from \"@aws-amplify/datastore\";\nimport { Post, PostStatus } from \"./models\";\n\nfunction App() {\n  const [form, updateForm] = useState({ title: '', rating: '' })\n  async function query() {\n    const posts = await DataStore.query(Post);\n    console.log('posts: ', posts)\n    const original = await DataStore.query(Post, \"4d5a08f3-d0ac-42bd-a19e-170991a4d79b\");\n\n    // await DataStore.save(\n    //   Post.copyOf(original, updated =\u003e {\n    //     updated.title = `title ${Date.now()}`;\n    //     updated.status = PostStatus.ACTIVE\n    //   })\n    // );\n  }\n  async function create() {\n    const postData = {...form, status: PostStatus.INACTIVE}\n    await DataStore.save(\n      new Post(postData)\n    );\n    console.log('successfully created new post')\n    updateForm({ title: '', rating: '' })\n  }\n  useEffect(() =\u003e {\n    query()\n  }, []);\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cheader className=\"App-header\"\u003e\n        \u003cimg src={logo} className=\"App-logo\" alt=\"logo\" /\u003e\n        \u003cdiv\u003e\n          \u003cinput type=\"button\" value=\"QUERY\" onClick={query} /\u003e\n        \u003c/div\u003e\n        \u003cinput\n          value={form.title}\n          placeholder=\"title\"\n          onChange={e =\u003e updateForm({ ...form, 'title': e.target.value })}\n        /\u003e\n        \u003cinput\n          value={form.rating}\n          placeholder=\"rating\"\n          onChange={e =\u003e updateForm({ ...form, 'rating': parseInt(e.target.value) })}\n        /\u003e\n        \u003cbutton onClick={create}\u003eCreate Post\u003c/button\u003e\n      \u003c/header\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n### Adding DataStore to an existing GraphQL API\n\nFirst, make sure you are updated to the latest version of the Amplify CLI:\n\n```sh\n$ npm install -g @aws-amplify/cli\n```\n\nNext, generate the models from your GraphQL schema:\n\n```sh\n$ amplify codegen models\n```\n\nNext, update the GraphQL API to add the new conflict detection:\n\n```sh\n$ amplify update api\n? Please select from one of the below mentioned services: GraphQL\n? Choose the default authorization type for the API API key\n? Enter a description for the API key: test\n? After how many days from now the API key should expire (1-365): \u003cyour expiration setting\u003e\n? Do you want to configure advanced settings for the GraphQL API\n  No, I am done.\n❯ Yes, I want to make some additional changes.\n? Configure additional auth types? N\n? Configure conflict detection? Y\n? Select the default resolution strategy: Auto Merge\n? Do you want to override default per model settings? N\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Famplify-datastore-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdabit3%2Famplify-datastore-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Famplify-datastore-example/lists"}