{"id":13532718,"url":"https://github.com/aws-samples/aws-amplify-graphql","last_synced_at":"2025-04-01T21:30:52.312Z","repository":{"id":137021492,"uuid":"122101248","full_name":"aws-samples/aws-amplify-graphql","owner":"aws-samples","description":"Sample using AWS Amplify and AWS AppSync together for user login and authorization when making GraphQL queries and mutations. Also includes complex objects for uploading and downloading data to and from S3 with a React app.","archived":false,"fork":false,"pushed_at":"2020-04-03T19:22:10.000Z","size":7274,"stargazers_count":530,"open_issues_count":0,"forks_count":116,"subscribers_count":43,"default_branch":"master","last_synced_at":"2024-11-02T19:34:19.505Z","etag":null,"topics":["aws-appsync","awsmobile","cognito","dynamodb","graphql","javascript","react","s3"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit-0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aws-samples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-02-19T18:09:11.000Z","updated_at":"2024-10-30T15:40:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"7d625b18-99a0-421c-afa8-0dfaca519149","html_url":"https://github.com/aws-samples/aws-amplify-graphql","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aws-samples%2Faws-amplify-graphql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aws-samples%2Faws-amplify-graphql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aws-samples%2Faws-amplify-graphql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aws-samples%2Faws-amplify-graphql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aws-samples","download_url":"https://codeload.github.com/aws-samples/aws-amplify-graphql/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246712949,"owners_count":20821822,"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","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-appsync","awsmobile","cognito","dynamodb","graphql","javascript","react","s3"],"created_at":"2024-08-01T07:01:13.168Z","updated_at":"2025-04-01T21:30:51.346Z","avatar_url":"https://github.com/aws-samples.png","language":"JavaScript","readme":"# AWS AppSync GraphQL Photo Sample\n\n**Please submit issues to the [appsync-sdk-js](https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues) repository.**\n\n![Demo](public/demo.gif)\n\nThis sample application shows how to use GraphQL to build an application that a user can login to the system, then upload and download photos which are private to them. The sample is written in React and uses AWS AppSync, Amazon Cognito, Amazon DynamoDB and Amazon S3 as well as the Amplify CLI.\n\n## Architecture Overview\n\n![Architecture](public/architecture_diagram.png)\n\n## Prerequisites\n+ [AWS Account](https://aws.amazon.com/mobile/details/)\n\n+ [NodeJS](https://nodejs.org/en/download/) with [NPM](https://docs.npmjs.com/getting-started/installing-node)\n\n+ [AWS Ampify CLI](https://aws-amplify.github.io/)\n  - `npm install -g @aws-amplify/cli`\n  - `amplify configure` \n\n## Getting Started\n\n1. Clone this repo locally.\n\n```\ngit clone https://github.com/aws-samples/aws-amplify-graphql.git\ncd aws-amplify-graphql\n```\n\n2. Initialize the amplify project.\n\n```\namplify init\n```\n\n3. Configure an Amazon Cognito User Pool to manage user credentials.\n\n```\namplify add auth\n```\n\n![Architecture](public/amplify-add-auth.png)\n\n4. Configure an Amazon S3 bucket to store files.\n\n```\namplify add storage\n```\n\n![Architecture](public/amplify-add-storage.png)\n\n5. Configure an AWS AppSync API to interact with my backend data sources such as Amazon DynamoDB, Amazon Elasticsearch, AWS Lambda, and self hosted HTTP services. \n\n```\namplify add api\n\n# When prompted for a schema.graphql provide the value \"schema.graphql\"\n# to point to the file checked in to the root of the project directory.\n```\n\n![Architecture](public/amplify-add-api.png)\n\n\u003e After running this command, you edit the schema.graphql located at `amplify/backend/api/\u003c-projectname-\u003e/schema.graphql`. You may delete the one at the root of the project directory as it will no longer be used.\n\n6. Deploy your project.\n\n```\namplify push\n\n# When asked if you would like to generate client code, you can\n# say no since we are using plain JavaScript.\n```\n\n7. Install client dependencies.\n\n```\nnpm install\n\n# or\nyarn\n```\n\n8. Run the react application\n\n```\nnpm run start\n\n# or\nyarn start\n```\n\nThe AWS Amplify CLI will create an Amazon Cognito User Pool and Identity Pool, an Amazon S3 bucket with private directories to store each user's photo and an AWS AppSync API that uses Amazon DynamoDB to store data.\n\nThe sample uses [AWS Amplify](https://github.com/aws/aws-amplify) to perform the Sign-Up and Sign-In flows with a Higher Order Component.\n\nIf the application runs successfully you should be able to enter the name of a photo, choose a file and then press **Add photo**. This will make a GraphQL call to enter the record into the database and simultaneously upload the object to S3. An immediate fetch of the record will then be at the bottom of the screen.\n\n","funding_links":[],"categories":["Example Projects"],"sub_categories":["Other blogs \u0026 tutorials"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faws-samples%2Faws-amplify-graphql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faws-samples%2Faws-amplify-graphql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faws-samples%2Faws-amplify-graphql/lists"}