Connect API and database to the app

Now that you’ve created and configured your application and initialized a new Amplify project, you can add a feature. The first feature you will add is an API.

The Amplify CLI supports creating and interacting with two types of API categories: REST and GraphQL.

The API you will be creating in this step is a GraphQL API using AWS AppSync (a managed GraphQL service) and the database will be Amazon DynamoDB (a NoSQL database).

Create a GraphQL API and database

Add a GraphQL API to your app and automatically provision a database by running the following command from the root of your application directory:

amplify add api

Accept the default values which are highlighted below:

? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)

The CLI will prompt you to open this GraphQL schema in your text editor.

amplify/backend/api/your-api-name/schema.graphql

# This "input" configures a global authorization rule to enable public access to
# all models in this schema. Learn more about authorization rules here: https://docs.amplify.aws/react/build-a-backend/graphqlapi/customize-authorization-rules/

input AMPLIFY {
  globalAuthRule: AuthRule = { allow: public }
} # FOR TESTING ONLY!
type Todo @model {
  id: ID!
  name: String!
  description: String
}

The schema generated is for a Todo app. You'll notice a @model directive on the Todo type. This directive is part of the Amplify GraphQL API category.

Amplify GraphQL API provides custom GraphQL directives that allow you to define data models, set up authorization rules, configure serverless functions as resolvers, and more.

A GraphQL type decorated with the @model directive will scaffold out the database table for the type (Todo table), the schema for CRUD (create, read, update, delete) and list operations, and the GraphQL resolvers needed to make everything work together.

From the command line, press enter to accept the schema and continue to the next steps.

Deploying the API

To deploy this backend, run the push command:

amplify push

Choose the following values for each prompt:

✔ Are you sure you want to continue? (Y/n) · yes
...
? Do you want to generate code for your newly created GraphQL API: Yes
? Choose the code generation language target: typescript
? Enter the file name pattern of graphql queries, mutations and subscriptions: src/graphql/**/*.ts
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions: Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested]: 2
? Enter the file name for the generated code: src/API.ts

✔ Are you sure you want to continue? (Y/n) · yes
...
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
? Enter the file name for the generated code src/API.js

Now the API is live and you can start interacting with it! The API you have deployed includes operations for creating, reading, updating, deleting, and listing posts.

amplify status

Current Environment: dev

┌──────────┬───────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name         │ Operation │ Provider plugin   │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Api      │ your-api-name         │ No Change │ awscloudformation │
└──────────┴───────────────────────┴───────────┴───────────────────┘

amplify console api

amplify console

amplify mock api

# If you have not already deployed your API, you will be walked through the following steps for GraphQL code generation
? Choose the code generation language target: javascript (or preferred target)
? Enter the file name pattern of graphql queries, mutations and subscriptions: src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions: Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2

mutation CreateTodo {
  createTodo(input: { name: "Test Todo", description: "Todo description" }) {
    id
    owner
    name
    updatedAt
    createdAt
    description
  }
}

query ListTodos {
  listTodos {
    items {
      description
      createdAt
      id
      owner
      name
    }
  }
}

Connect frontend to API

Update your main.js file to setup your app to add data to your database with a mutation by using client.graphql():

import './style.css';
import { Amplify } from 'aws-amplify';
import amplifyconfig from './src/amplifyconfiguration.json';

import { generateClient } from 'aws-amplify/api';
import { createTodo } from './src/graphql/mutations';
import { listTodos } from './src/graphql/queries';
import { onCreateTodo } from './src/graphql/subscriptions';

Amplify.configure(amplifyconfig);

const client = generateClient();

const MutationButton = document.getElementById('MutationEventButton');
const MutationResult = document.getElementById('MutationResult');
const QueryResult = document.getElementById('QueryResult');
const SubscriptionResult = document.getElementById('SubscriptionResult');

async function addTodo() {
  const todo = {
    name: 'Use AppSync',
    description: `Realtime and Offline (${new Date().toLocaleString()})`
  };

  return await client.graphql({
    query: createTodo,
    variables: {
      input: todo
    }
  });
}

async function fetchTodos() {
  try {
    const response = await client.graphql({
      query: listTodos
    });

    response.data.listTodos.items.map((todo, i) => {
      QueryResult.innerHTML += `<p>${todo.name} - ${todo.description}</p>`;
    });
  } catch (e) {
    console.log('Something went wrong', e);
  }
}

MutationButton.addEventListener('click', (evt) => {
  addTodo().then((evt) => {
    MutationResult.innerHTML += `<p>${evt.data.createTodo.name} - ${evt.data.createTodo.description}</p>`;
  });
});

function subscribeToNewTodos() {
  client.graphql({ query: onCreateTodo }).subscribe({
    next: (evt) => {
      const todo = evt.data.onCreateTodo;
      SubscriptionResult.innerHTML += `<p>${todo.name} - ${todo.description}</p>`;
    }
  });
}

subscribeToNewTodos();
fetchTodos();

Let's walk through some of the functions:

fetchTodos - Uses the Amplify API client created by generateClient() to call the AppSync GraphQL API with the listTodos query. Once the data is returned, the items array is passed in to the setTodos function to update the local state.

addTodo - Uses the Amplify API client created by generateClient() to call the AppSync GraphQL API with the createTodo mutation. A difference between the listTodos query and the createTodo mutation is that createTodo accepts an argument containing the variables needed for the mutation.

subscribeToNewTodos - Uses the Amplify API client created by generateClient() to subscribe to any new todos created and displays it to the user.

Run locally

Next, run the app and you should see the updated UI with the ability to create and view the list of todos:

npm run dev

You have successfully deployed your API and connected it to your app!