AWS AppSync and Gatsby

This sample demonstrates how Gatsby can query an AWS AppSync GraphQL API to display a list of events. It leverages Gatsby's ability to natively query third-party GraphQL APIs.

AWS AppSync is a serverless backend for web and mobile apps powered by GraphQL that also provides real-time and offline capabilities to apps.

Get started

Set up the AWS AppSync Events backend

1. Login to the AWS AppSync console.
2. Click Create API.
3. Select the Event App sample project. Click Start.
4. Enter a friendly name or keep the default ("My AppSync API"). Click Create.
5. The API and resources will be created in a few seconds and the console will take you to the Queries pane with a pre-filled query and mutation.
6. Run the CreateEvent mutation a few times with different names and details for events.
7. Run the ListEvents query to view the events that were created.
8. Go to the Settings pane and copy the API URL and the API Key.

Run Gatsby

1. npm i -g gatsby-cli # install the Gatsby CLI
2. Clone this repository and navigate into the directory.
3. npm install # install node dependencies
4. AWS_APPSYNC_API_URL="<API url from Settings>" AWS_APPSYNC_API_KEY="<API key from settings>" gatsby develop
5. Screenshot

Credits

This sample is based on gatsby-starter-hello-world and gatsby-github-displayer.

License Summary

This sample code is made available under a modified MIT license. See the LICENSE file.