GraphQL starter application with Realtime and Offline functionality using AWS AppSync
This is a Starter React application for using the Sample app in the AWS AppSync console when building your GraphQL API. The Sample app creates a GraphQL schema and provisions Amazon DynamoDB resources, then connects them appropriately with Resolvers. The application demonstrates GraphQL Mutations, Queries and Subscriptions using AWS AppSync. You can use this for learning purposes or adapt either the application or the GraphQL Schema to meet your needs.
GraphQL Mutations
GraphQL Queries
GraphQL Subscriptions
Authorization
Navigate to the AWS AppSync console using the URL: http://console.aws.amazon.com/appsync/home
Click on Create API
and select the Event App
under the sample project
in the bottom pane, and select Start
. Enter a API name of your choice. Click Create
.
First, clone this repo:
git clone https://github.com/aws-samples/aws-mobile-appsync-events-starter-react.git
cd ./aws-mobile-appsync-events-starter-react
Wait until the progress bar at the top has completed deploying your resources. Then from the integration page of your GraphQL API (you can click the name you entered in the left hand navigation).
On this same page, select JavaScript
at the bottom to download your aws-exports.js
configuration file by clicking the Download Config button. Replace the aws-exports.js
file in the root of your app with the file you just downloaded.
Install dependencies
npm install
Start the application:
npm run start
BrowserRouter
from React Router.AWSAppSyncClient
using an API Key. This can be confugured to use Amazon Cognito Identity or Amazon Cognito User Pools as well../GraphQL/QueryAllEvents.js
./GraphQL/MutationDeleteEvent.js
./GraphQL/MutationCreateEvent.js
ViewEvent
gets all the comments for a specific event when page loads with a GraphQL query defined in ./GraphQL/QueryGetEvent
EventComments
sets up a GraphQL subscription using ./GraphQL/SubscriptionEventComments
to display any new comments on an event in realtime.