amazon-archives / aws-mobile-appsync-events-starter-react

GraphQL starter application with Realtime and Offline functionality using AWS AppSync

Introduction

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.

Features

• GraphQL Mutations

  • Create new events
  • Create comments on existing events

• GraphQL Queries

  • Get all events
  • Get an event by Id

• GraphQL Subscriptions

  • Real time updates for comments on an event

• Authorization

  • The app uses API Key as the authorization mechanism

AWS Setup

1. Navigate to the AWS AppSync console using the URL: http://console.aws.amazon.com/appsync/home

2. 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.

React Setup

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

Application Walkthrough

./src/App.js

• Sets up the application navigation between screens using BrowserRouter from React Router.
• Configures the AWSAppSyncClient using an API Key. This can be confugured to use Amazon Cognito Identity or Amazon Cognito User Pools as well.

./Components/AllEvents.js

• Uses Higher Order Components for making GraphQL calls to AWS AppSync.
• View to display all the events from ./GraphQL/QueryAllEvents.js
• Allows you to delete individual events. This will use ./GraphQL/MutationDeleteEvent.js

./Components/NewEvent.js

• Uses Higher Order Components for making GraphQL calls to AWS AppSync.
• View to create a new event using ./GraphQL/MutationCreateEvent.js

./Components/ViewEvent.js and EventComment.js

• Uses Higher Order Components for making GraphQL calls to AWS AppSync.
• ViewEvent gets all the comments for a specific event when page loads with a GraphQL query defined in ./GraphQL/QueryGetEvent
• Once the page loads, EventComments sets up a GraphQL subscription using ./GraphQL/SubscriptionEventComments to display any new comments on an event in realtime.

./GraphQL Directory

• Contains GraphQL queries and mutations for interacting with AWS AppSync.

aws-mobile-appsync-events-starter-react's Issues

Deleted items stuck in the cache.

To replicate:

1. create few events
2. delete some events
3. notice graphql keeps returning deleted events in network
4. notice same events in the localstorage

Re-sync doubles data in the UI

To replicate:

1. add comment while in offline
2. go back to list
3. turn on online
4. notice wrong number of comments shown

Where is schema file?

Question: Query on single Comment

Following the basic scaffold on the AppSync console for the Events AppSync app, I've found that there isn't a predefined getComment query function. I'm assuming that due to the Comments table having the eventId as the PPK and commentId as the Sort Key, I'd need to write a custom resolver mapping template. When I've tried to do this, it returns a Dynamo error - I was just wondering if there was a way to get around this?

I've seen other examples where you have to make a query with both the PPK and SortKey, so in this instance it would be eventId & commentId which feels slightly unnecessary to retrieve a single comment when you might not be aware of what the eventId is when you're requesting the comment. Thanks

Congnito authentication

Does this support Cognito authentication using let's say hosted Cognito UI?

Duplicate events and comments are shown briefly after adding new items

This is a reopen of #14

Reproduction scenario:
#14 (comment)

Gif showing the issue:
#14 (comment)

pr with a possible fix:
#16

Typo on Subscription

Fix typo on Subscription: #17

AppSync Offline Problem

Hello

I have problems when I use this sample.

-Issue Reproduction Steps

1. You are online, And add one event.
2. Make you offlne and delete the created event. And then you can see there are no events.
3. Refresh the web page and also you can see there are no events.
4. Make you online and then you can see the deleted event. - This is the problem. Why deleted event is showing? On here, after refresh webpage again, that event is disappeared

Please let me know why this thing is happening!

Thanks

Download the AWS AppSync.js config file - button not working

The issue is not exactly related to this repo. The button to download the AppSync.js file is not working in the appsync service page . It took a while to figure out the contents to be populated inside the AppSync.js file. Raising a pr to update readme with the content 🙂

Attempted import error: 'compose' is not exported from 'react-apollo'

I get this error when I use compose with my Component

How to set Access token in request header?

I am using AMAZON_COGNITO_USER_POOLS for authentication and my apiKey is set as undefined.

After getting the access token, How and where can I set it so its sent along with the request.

For now when I try to access my GraphQL Endpoint, I am getting
{"message":"Missing authorization header"}

events created with newline in the description are lost

The new event UI has a textarea for the description, which invites use of newlines. The Save button seems to work: the app goes from NewEvent back to Home and the new event appears briefly, but it then disappears.

I see a complaint in the console about an unescaped control character (decimal 10 is newline):

Uncaught (in promise) Error: GraphQL error: Unable to parse the JSON document: Illegal unquoted character ((CTRL-CHAR, code 10)): has to be escaped using backslash to be included in string value
 at [Source: (String)"{
    "version": "2017-02-28",
    "operation": "PutItem",
    "key": {
        "id": { "S": "5f7a4c6d-eee0-474a-b4ca-2b52e953a8bf"}
    },
    "attributeValues": {
        "name": { "S": "one" },
        "where": { "S": "two" },
        "when": { "S": "2018-02-23T00:15:00Z" },
        "description": { "S": "three
four" }
    }
}"; line: 11, column: 38]
 at [Source: (String)"{
    "version": "2017-02-28",
    "operation": "PutItem",
    "key": {
        "id": { "S": "5f7a4c6d-eee0-474a-b4ca-2b52e953a8bf"}
    },
    "attributeValues": {
        "name": { "S": "one" },
        "where": { "S": "two" },
        "when": { "S": "2018-02-23T00:15:00Z" },
        "description": { "S": "three
four" }
    }
}"; line: 11, column: 38]

make it run with Expo (CRNA)

I apparently made it work in this fork
https://github.com/sravinet/aws-mobile-appsync-events-starter-react-native

(however there's an issue to be discussed, I think it's not related to this move to Expo)

How to delete CommentTable items related to EventTable item

I'm newbie of AWS Mobile AppSync.

I could run GraphQL starter application. I create an event, add comments to the event and delete the event. These are my operations.

The deleted event is deleted from DynamoDB table but comment items which related to the deleted event didn't deleted from DynamoDB table.
I want to know what is the easiest way to delete the comment items triggered deleting an event from DymamoDB table.

Cannot read property 'subscription' of undefined

// edit: my bad

Hi, I subscriptions does not work.
In the console i get this error:

index.js:2177 Unhandled GraphQL subscription error TypeError: Cannot read property 'subscription' of undefined
at SubscriptionHandshakeLink._this.request (subscription-handshake-link.js:56)
at link.js:43
at index.js:20

Add the yarn install requirement and hint for install

just a quick tip to let people on top know that yarn is a pre-req and maybe give the URL that walks through install

how to identify number of active subscribers by subscription in AppSync

Need to keep count of how many subscribers are connected with each subscription.

For UserA, UserB are connected with SubscriptionA : then 2 is the total subscribers
For UserA are connected with SubscriptionB : then 1 is the total subscribers

Can i know when UserA unsubscribes , subscribes, disconnects, reconnects from AppSync ?

AppSync config example doesn't match TypeScript defs

Someone should probably update the example code for creating a client, so it matches the TypeScript types.

const client = new AWSAppSyncClient(
  {
    url: appSyncConfig.graphqlEndpoint,
    region: appSyncConfig.region,
    auth: {
      type: appSyncConfig.authenticationType,
      apiKey: () => appSyncConfig.apiKey,
    },
  }
);

And in the AWS Console, when you download the AppSync.js file, it should definitely use the auth type enum:

import { AUTH_TYPE } from 'aws-appsync/lib/link/auth-link';

export default {
  graphqlEndpoint: 'https://xx',
  region: 'us-east-1',
  authenticationType: AUTH_TYPE.AWS_IAM,
  apiKey: 'xx',
};

yarn warnings (+ 1 error?)

Following the directions in README.md, I downloaded AppSync.js and ran yarn. Results:

aws-mobile-appsync-events-starter-react aws: git:master $ yarn
yarn install v1.3.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > [email protected]" has unmet peer dependency "graphql@^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0".
warning " > [email protected]" has unmet peer dependency "apollo-client@^2.0.3".
warning "react-datepicker > [email protected]" has unmet peer dependency "[email protected] - 4.x".
warning "react-datepicker > [email protected]" has unmet peer dependency "eslint@>=3.1.0".
[4/4] 📃  Building fresh packages...
[-/4] ⠐ waiting...
[-/4] ⠐ waiting...
[-/4] ⠐ waiting...
[4/4] ⠐ fsevents: node-pre-gyp
warning Error running install script for optional dependency: "/Users/chriseich/Desktop/tools/aws-mobile-appsync-events-starter-react/node_modules/fsevents: Command failed.\nExit code: 1\nCommand: node install\nArguments: \nDirectory: /Users/chriseich/Desktop/tools/aws-mobile-appsync-events-starter-react/node_modules/fsevents\nOutput:\nnode-pre-gyp info it worked if it ends with ok\nnode-pre-gyp info using [email protected]\nnode-pre-gyp info using [email protected] | darwin | x64\nnode-pre-gyp info check checked for \"/Users/chriseich/Desktop/tools/aws-mobile-appsync-events-starter-react/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node\" (not found)\nnode-pre-gyp http GET https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.2/fse-v1.1.2-node-v59-darwin-x64.tar.gz\nnode-pre-gyp http 404 https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.2/fse-v1.1.2-node-v59-darwin-x64.tar.gz\nnode-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.2/fse-v1.1.2-node-v59-darwin-x64.tar.gz \nnode-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v59 ABI, unknown) (falling back to source compile with node-gyp) \nnode-pre-gyp http 404 status code downloading tarball https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.2/fse-v1.1.2-node-v59-darwin-x64.tar.gz \nnode-pre-gyp ERR! build error \nnode-pre-gyp ERR! stack Error: Failed to execute 'node-gyp clean' (Error: spawn node-gyp ENOENT)\nnode-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/chriseich/Desktop/tools/aws-mobile-appsync-events-starter-react/node_modules/node-pre-gyp/lib/util/compile.js:77:29)\nnode-pre-gyp ERR! stack     at ChildProcess.emit (events.js:160:13)\nnode-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:207:12)\nnode-pre-gyp ERR! stack     at onErrorNT (internal/child_process.js:389:16)\nnode-pre-gyp ERR! stack     at process._tickCallback (internal/process/next_tick.js:152:19)\nnode-pre-gyp ERR! System Darwin 17.4.0\nnode-pre-gyp ERR! command \"/usr/local/Cellar/node/9.5.0/bin/node\" \"/Users/chriseich/Desktop/tools/aws-mobile-appsync-events-starter-react/node_modules/fsevents/node_modules/.bi✨  Done in 11.11s.

Some Strange Behavior after initial setup

Following along with instructions when the app runs I see:

1. Adding event causes 2 events to appear for half a second then it disappears
2. Commenting causes 2 comments to appear (only 1 is actually created in DynamoDB), and then after 2 seconds or so the entire event screen clears out and becomes a single "Back to Events" button.
3. Clicking on the button takes me back to the events listing but no event is displayed
4. Clicking the browser's Refresh Button makes the event appear again.
5. Attempting to add another comment cause the error below to be thrown:

Uncaught TypeError: Cannot read property 'comments' of undefined
at Object.props (EventComments.js:63)

If it helps I'm running npm start in node v8.9.1 and my browser is "Version 64.0.3282.167 (Official Build) Built on Ubuntu , running on LinuxMint 18.2 (64-bit)"

Thanks

Add OPENID_CONNECT support?

I'm trying to use OpenID Connect with AppSync, but I haven't found much information on the subject.

This related ticket serverless/serverless-graphql#360 shows the place I'm stuck in at the moment - just getting a 500 InternalFailure error from the GraphQL endpoint.

It would be great to have this repo also support authenticationType: OPENID_CONNECT, or at least get some pointers on where to look next.

you did not mention the schema for your events application

hii i am learning appsync you put all the code but where is your schema of events so i could check this repository is working or not .

Double Mutation - React js example

Seeing this error when i did a single event creation.
anyone experience the same?