Update amplifycli_react_tutorial.md

kaustavghosh06 · web-flow · commit 03efa6bd5646 · 2018-08-09T09:59:43.000-07:00
diff --git a/amplifycli_react_tutorial.md b/amplifycli_react_tutorial.md
@@ -12,7 +12,7 @@ If you're using Windows, we recommend the [Windows Subsystem for Linux](https://
 - An AWS Account and credentials are necessary. If you're unfamiliar with finding credentials see the following [LINK](https://docs.aws.amazon.com/aws-mobile/latest/developerguide/aws-mobile-cli-credentials.html).
 - Ensure you have NodeJS installed
   - Examples below use `yarn` but `npm` works as well.
-- Download the Amplify CLI from [HERE](https://s3.amazonaws.com/amplify-cli-beta-3dd89264-8c7c-11e8-9eb6-529269fb1459/amplify-cli-0.1.0.tgz)
+- Download the Amplify CLI from [HERE](https://s3.amazonaws.com/amplify-cli-beta-3dd89264-8c7c-11e8-9eb6-529269fb1459/amplify-cli-0.1.0-8-8-18.tgz)
 - Navigate into the unpacked directory (usually called `package`) and run `npm run setup-dev`
 - Ensure you have [Create React App](https://github.com/facebook/create-react-app) installed and create a new project:
 ```
@@ -116,10 +116,101 @@ Finally, modify the `render` method so that you can upload files and also view a
 
 Save your changes and run `amplify publish`. Since you already pushed the changes earlier just the local build will be created and uploaded to the hosting bucket. Login as before if necessary and you'll be able to upload photos, which are protected by user. You can refresh the page to view them after uploading.
 
+# Add GraphQL backend
+
+Now that your application is setup, the final piece is to add a backend API with data that can be peristed in a database. The Amplify CLI comes with a **GraphQL Transformer** that converts annotated GraphQL schema files into the appropriate CloudFormation based on your data requirements. This includes options such as:
+- `@model` for storing types in Amazon DynamoDB
+- `@auth` to define different authorization strategies
+- `@connection` for specifying relationships between `@model` object types
+- `@searchable` to stream `@model` types into Amazon Elasticsearch
+
+To get started run `amplify add api` and select `GraphQL`. When prompted choose `Amazon Cognito User Pools` and the project will leverage your existing Auth setup. Select **No** when asked for an `annotated schema` and **Yes** when asked about `guided schema creation`.
+
+The guided creation will give some default schemas that are pre-annotated for you for learning purposes. The following steps take you through choosing `Single object with fields` but feel free to revisit these steps later in another project. If you choose this option you'll see the following annotated schema in your text editor:
+
+```
+type Todo @model {
+  id: ID!
+  name: String!
+  description: String
+}
+```
+
+This is the GraphQL schema that will be deployed to AWS AppSync. If you're familiar with GraphQL you could rename/add fields & types, but note the client code would need to change as well. When you're ready press `enter` in the CLI and then `No` on the next question followed by `amplify push`.
+
+After the deployment is done open your `App.js` again and update the import to include both the `API` category and `graphqlOperation` method:
+
+```
+import Amplify, { Analytics, Storage, API, graphqlOperation } from 'aws-amplify';
+```
+
+Add the following query and mutations in your code, **before** the `class App extends Component {...}` definition:
+
+```
+const listTodos = `query listTodos {
+  listTodo{
+    items{
+      id
+      name
+      description
+    }
+  }
+}`
+
+const addTodo = `mutation createTodo($name:String! $description: String!) {
+  createTodo(input:{
+    name:$name
+    description:$description
+  }){
+    id
+    name
+    description
+  }
+}`
+
+```
+
+Now inside the `App` component add in the following two methods before the `render()` method:
+
+```
+  todoMutation = async () => {
+    const todoDetails = {
+      name: 'Party tonight!',
+      description: 'Amplify CLI works!'
+    };
+    
+    const newEvent = await API.graphql(graphqlOperation(addTodo, todoDetails));
+    alert(JSON.stringify(newEvent));
+  }
+
+  listQuery = async () => {
+    console.log('listing todos');
+    const allTodos = await API.graphql(graphqlOperation(listTodos));
+    alert(JSON.stringify(allTodos));
+  }
+```
+
+You can now make GraphQL calls from your application. Update the `render()` method so that it has the following buttons to invoke the mutation and query:
+
+```
+  render() {
+    return (
+      <div className="App">
+        <p> Pick a file</p>
+        <input type="file" onChange={this.uploadFile} />
+        <button onClick={this.listQuery}>GraphQL Query</button>
+        <button onClick={this.todoMutation}>GraphQL Mutation</button>
+        <S3Album level="private" path='' />
+      </div>
+    );
+  }
+```
+
+Save the file and run `amplify publish`. After the backend is deployed you should be able to press the **GraphQL Mutation** button to enter data into the database and **GraphQL Query** to retrieve a list of all entries. You can validate this in the AWS AppSync console as well.
 
 # Add REST API calls to a database
 
-Now that your application is setup, the final piece is to add a backend API with data that can be peristed in a database. For this example we will use a REST backend with a NoSQL database. Run `amplify add api` and follow the prompts, select the **API Gateway** provider, giving your API a friendly name such as **myapi** or something else that you remember. Use the default `/items` path and select **Create a new lambda function**. Select the option titled **CRUD function for Amazon DynamoDB table (Integration with Amazon API Gateway and Amazon DynamoDB)** when prompted. This will create an architecture of Amazon API Gateway with Express running in a Lambda function that reads and writes to Amazon DynamoDB. You'll be able to later modify the routes in the Lambda function to meet your needs and update it in the cloud. 
+For this example we will use a REST backend with a NoSQL database. Run `amplify add api` and follow the prompts, select the **API Gateway** provider, giving your API a friendly name such as **myapi** or something else that you remember. Use the default `/items` path and select **Create a new lambda function**. Select the option titled **CRUD function for Amazon DynamoDB table (Integration with Amazon API Gateway and Amazon DynamoDB)** when prompted. This will create an architecture of Amazon API Gateway with Express running in a Lambda function that reads and writes to Amazon DynamoDB. You'll be able to later modify the routes in the Lambda function to meet your needs and update it in the cloud. 
 
 Since you do not have a database provisioned yet, the CLI workflow will prompt you for this. Alternatively, you could have run `amplify add storage` beforehand to create a DynamoDB table and use it in this setup. When the CLI asks you for the Primary Key structure use an attribute named `id` of type `String`. Don't select any other options like Sort keys or GSIs.
 
