├── .github └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── Screenshot.png ├── gatsby-config.js ├── package-lock.json ├── package.json └── src ├── components └── EventList.js └── pages └── index.js /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | *Issue #, if available:* 2 | 3 | *Description of changes:* 4 | 5 | 6 | By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice. 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | .cache/ 61 | public 62 | yarn-error.log 63 | 64 | # macOS 65 | .DS_Store 66 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | ## Code of Conduct 2 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct). 3 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact 4 | opensource-codeofconduct@amazon.com with any additional questions or comments. 5 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | 3 | Thank you for your interest in contributing to our project. Whether it's a bug report, new feature, correction, or additional 4 | documentation, we greatly value feedback and contributions from our community. 5 | 6 | Please read through this document before submitting any issues or pull requests to ensure we have all the necessary 7 | information to effectively respond to your bug report or contribution. 8 | 9 | 10 | ## Reporting Bugs/Feature Requests 11 | 12 | We welcome you to use the GitHub issue tracker to report bugs or suggest features. 13 | 14 | When filing an issue, please check [existing open](https://github.com/aws-samples/aws-appsync-gatsby-sample/issues), or [recently closed](https://github.com/aws-samples/aws-appsync-gatsby-sample/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aclosed%20), issues to make sure somebody else hasn't already 15 | reported the issue. Please try to include as much information as you can. Details like these are incredibly useful: 16 | 17 | * A reproducible test case or series of steps 18 | * The version of our code being used 19 | * Any modifications you've made relevant to the bug 20 | * Anything unusual about your environment or deployment 21 | 22 | 23 | ## Contributing via Pull Requests 24 | Contributions via pull requests are much appreciated. Before sending us a pull request, please ensure that: 25 | 26 | 1. You are working against the latest source on the *master* branch. 27 | 2. You check existing open, and recently merged, pull requests to make sure someone else hasn't addressed the problem already. 28 | 3. You open an issue to discuss any significant work - we would hate for your time to be wasted. 29 | 30 | To send us a pull request, please: 31 | 32 | 1. Fork the repository. 33 | 2. Modify the source; please focus on the specific change you are contributing. If you also reformat all the code, it will be hard for us to focus on your change. 34 | 3. Ensure local tests pass. 35 | 4. Commit to your fork using clear commit messages. 36 | 5. Send us a pull request, answering any default questions in the pull request interface. 37 | 6. Pay attention to any automated CI failures reported in the pull request, and stay involved in the conversation. 38 | 39 | GitHub provides additional document on [forking a repository](https://help.github.com/articles/fork-a-repo/) and 40 | [creating a pull request](https://help.github.com/articles/creating-a-pull-request/). 41 | 42 | 43 | ## Finding contributions to work on 44 | Looking at the existing issues is a great way to find something to contribute on. As our projects, by default, use the default GitHub issue labels (enhancement/bug/duplicate/help wanted/invalid/question/wontfix), looking at any ['help wanted'](https://github.com/aws-samples/aws-appsync-gatsby-sample/labels/help%20wanted) issues is a great place to start. 45 | 46 | 47 | ## Code of Conduct 48 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct). 49 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact 50 | opensource-codeofconduct@amazon.com with any additional questions or comments. 51 | 52 | 53 | ## Security issue notifications 54 | If you discover a potential security issue in this project we ask that you notify AWS/Amazon Security via our [vulnerability reporting page](http://aws.amazon.com/security/vulnerability-reporting/). Please do **not** create a public github issue. 55 | 56 | 57 | ## Licensing 58 | 59 | See the [LICENSE](https://github.com/aws-samples/aws-appsync-gatsby-sample/blob/master/LICENSE) file for our project's licensing. We will ask you to confirm the licensing of your contribution. 60 | 61 | We may ask you to sign a [Contributor License Agreement (CLA)](http://en.wikipedia.org/wiki/Contributor_License_Agreement) for larger changes. 62 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this 4 | software and associated documentation files (the "Software"), to deal in the Software 5 | without restriction, including without limitation the rights to use, copy, modify, 6 | merge, publish, distribute, sublicense, and/or sell copies of the Software, and to 7 | permit persons to whom the Software is furnished to do so. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 10 | INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 11 | PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 12 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 13 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 14 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## AWS AppSync and Gatsby 2 | 3 | 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](https://www.gatsbyjs.org/blog/2018-09-25-announcing-graphql-stitching-support/). 4 | 5 | [AWS AppSync](https://aws.amazon.com/appsync/) is a [serverless backend for web and mobile apps](https://www.youtube.com/watch?v=x6s34ecJvik) powered by GraphQL that also provides real-time and offline capabilities to apps. 6 | 7 | ## Get started 8 | 9 | ### Set up the AWS AppSync Events backend 10 | 11 | 1. Login to the [AWS AppSync console](https://us-west-2.console.aws.amazon.com/appsync/home?region=us-west-2#/). 12 | 1. Click `Create API`. 13 | 1. Select the `Event App` sample project. Click `Start`. 14 | 1. Enter a friendly name or keep the default (`"My AppSync API"`). Click `Create`. 15 | 1. 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. 16 | 1. Run the `CreateEvent` mutation a few times with different names and details for events. 17 | 1. Run the `ListEvents` query to view the events that were created. 18 | 1. Go to the `Settings` pane and copy the `API URL` and the `API Key`. 19 | 20 | ### Run Gatsby 21 | 22 | 1. `npm i -g gatsby-cli # install the Gatsby CLI` 23 | 1. Clone this repository and navigate into the directory. 24 | 1. `npm install # install node dependencies` 25 | 1. `AWS_APPSYNC_API_URL="" AWS_APPSYNC_API_KEY="" gatsby develop` 26 | 1. [Screenshot](https://github.com/aws-samples/aws-appsync-gatsby-sample/blob/master/Screenshot.png) 27 | 28 | ## Credits 29 | 30 | This sample is based on [gatsby-starter-hello-world](https://github.com/gatsbyjs/gatsby-starter-hello-world) and [gatsby-github-displayer](https://github.com/freiksenet/gatsby-github-displayer). 31 | 32 | ## License Summary 33 | 34 | This sample code is made available under a modified MIT license. See the LICENSE file. 35 | -------------------------------------------------------------------------------- /Screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amazon-archives/aws-appsync-gatsby-sample/3743fc5264b380b932e2a7e287354b1209575432/Screenshot.png -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | { 4 | resolve: "gatsby-source-graphql", 5 | options: { 6 | // This type will contain the remote schema Query type 7 | typeName: "AWSAppSync", 8 | // This is the field under which it's accessible 9 | fieldName: "events", 10 | // URL to query from 11 | url: `${process.env.AWS_APPSYNC_API_URL}`, 12 | headers: { 13 | "x-api-key": `${process.env.AWS_APPSYNC_API_KEY}` 14 | }, 15 | refetchInterval: 10, 16 | }, 17 | }, 18 | ], 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aws-appsync-gatsby-sample", 3 | "description": "Demonstrates how Gatsby can query an AWS AppSync GraphQL API", 4 | "license": "MIT-0", 5 | "scripts": { 6 | "develop": "gatsby develop", 7 | "build": "gatsby build", 8 | "serve": "gatsby serve" 9 | }, 10 | "dependencies": { 11 | "gatsby": "^2.0.0", 12 | "gatsby-source-graphql": "^2.0.3", 13 | "react": "^16.5.1", 14 | "react-dom": "^16.5.1" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/EventList.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const EventList = ({ events }) => ( 4 |
5 | {events.map((event, i) => ( 6 |
7 |

{event.name}

8 |
    9 |
  • When: {event.when}
    • 10 |
  • Where: {event.where}
    • 11 |
12 |
13 | ))} 14 |
15 | ) 16 | 17 | export default EventList; 18 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import EventList from "../components/EventList" 3 | 4 | const Index = ({ data }) => ( 5 |
6 |

AWS AppSync Events

7 |

AWS AppSync is a serverless backend for web and mobile apps powered by GraphQL that provides real-time and offline data access. This sample renders a list of events retrieved from an AWS AppSync GraphQL API into a Gatsby site.

8 | 9 |
10 | ) 11 | 12 | export default Index; 13 | 14 | export const query = graphql` 15 | query ListEvents { 16 | events { 17 | listEvents { 18 | items { 19 | id 20 | name 21 | when 22 | where 23 | } 24 | } 25 | } 26 | } 27 | ` 28 | --------------------------------------------------------------------------------