Connect API and database to the app

For new Amplify apps, we recommend using Amplify Gen 2. You can learn more in our Gen 2 Docs.

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

Review deployment status

Next, run the following command to check Amplify's status:

amplify status

This will give us the current status of the Amplify project, including the current environment, any categories that have been created, and what state those categories are in. It should look similar to this:

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

Review deployed API in AWS console

To view the GraphQL API in the AppSync console at any time, run the following command:

amplify console api

To view your entire app in the Amplify console at any time, run the following command:

amplify console

Test API with local mocking

To test this out locally, you can run the mock command. Note: Refer to the instructions to setup mocking.

If you'd like to go ahead and connect the front end, you can jump to the next step.

amplify mock api

Note: amplify mock api requires Java.

# 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

This will open the GraphiQL explorer on a local port. From the test environment you can try out different operations locally, like queries and mutations.

In the GraphiQL toolbar, select Use: User Pool and try creating a todo:

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

Next, update auth to Use: API Key and try querying the list of todos:

query ListTodos {
  listTodos {
    items {
      description
      createdAt
      owner

API with Server-Side Rendering (SSR)

In this section you will create a way to list and create todos from the Next.js application. To do this, you will fetch & render the latest todos from the server as well as create a new todo.

Generate the Amplify GraphQL API client

To make any GraphQL API requests service-side, we need to first generate an API client that we can use on server-side. To generate a new API client, import generateServerClientUsingCookies from @aws-amplify/adapter-nextjs/api and use it to generate a cookiesClient using the amplifyconfiguration.json in our project as config and cookies from next/headers.

Amplify offers two API clients for Next.js server-side runtimes. Use generateServerClientUsingCookies primarily for use cases where cookies from next/headers is available, such as in App Router's React Server Components, Server Actions. Use generateServerClientUsingReqRes for use cases where a NextRequest/NextResponse are available, such as in the Pages Router or Middleware. Review Connect to data from server-side runtimes to review in-depth which API client to use for which use cases.

Open src/app/page.tsx and replace it with the following code:

import { generateServerClientUsingCookies } from '@aws-amplify/adapter-nextjs/api';
import { cookies } from 'next/headers';
import config from '@/amplifyconfiguration.json';
const cookiesClient = generateServerClientUsingCookies({
export default async function Home() {
      style={{
        maxWidth: '500px',
        margin: '0 auto',
        textAlign: 'center',
        marginTop: '100px'
      <form>
        <input name="name" placeholder="Add a todo" />
        <button type="submit">Add</button>
      </form>

Create a form for submitting the todos

In Next.js you can use a Server Action to handle form submission server-side. Let's add a Server Action which submits its data to the createTodo function. When called, createTodo should send a GraphQL mutation via cookiesClient.graphql(...) to the GraphQL API, then call revalidatePath from the Next.js cache to invalidate the page cache and fetch the latest todos.

Update the src/app/page.tsx with the following code:

import { generateServerClientUsingCookies } from '@aws-amplify/adapter-nextjs/api';
import { cookies } from 'next/headers';
// 1. Add the following two imports
import { revalidatePath } from 'next/cache';
import * as mutations from '@/graphql/mutations';
import config from '@/amplifyconfiguration.json';
const cookiesClient = generateServerClientUsingCookies({
// 2. Create a new Server Action
async function createTodo(formData: FormData) {
  'use server';
  const { data } = await cookiesClient.graphql({
    query: mutations.createTodo,
    variables: {
      input: {
        name: formData.get('name')?.toString() ?? ''
  console.log('Created Todo: ', data?.createTodo);
  revalidatePath('/');
export default async function Home() {
      style={{
        maxWidth: '500px',
        margin: '0 auto',
        textAlign: 'center',
        marginTop: '100px'
      {/* 3. Update the form's action to use the
          new create Todo Server Action*/}
      <form action={createTodo}>
        <input name="name" placeholder="Add a todo" />
        <button type="submit">Add</button>
      </form>

List todos

Using cookiesClient.graphql(...) we make GraphQL queries as well. Pass in the listTodos query and assign the items returned to todos then iterate over them to display in a <ul> tag. If there are no todos, we display the message "No todos, please add one".

Update the src/app/page.tsx with the following code:

import { generateServerClientUsingCookies } from '@aws-amplify/adapter-nextjs/api';
import { cookies } from 'next/headers';
import { revalidatePath } from 'next/cache';
import * as mutations from '@/graphql/mutations';
// 1. Add the queries as an import
import * as queries from '@/graphql/queries';
import config from '@/amplifyconfiguration.json';
const cookiesClient = generateServerClientUsingCookies({
async function createTodo(formData: FormData) {
  'use server';
  const { data } = await cookiesClient.graphql({
    query: mutations.createTodo,
    variables: {
      input: {
        name: formData.get('name')?.toString() ?? ''
  console.log('Created Todo: ', data?.createTodo);
  revalidatePath('/');
export default async function Home() {
  // 2. Fetch additional todos
  const { data, errors } = await cookiesClient.graphql({
    query: queries.listTodos
  const todos = data.listTodos.items;
      style={{
        maxWidth: '500px',
        margin: '0 auto',
        textAlign: 'center',
        marginTop: '100px'
      <form action={createTodo}>
        <input name="name" placeholder="Add a todo" />
        <button type="submit">Add</button>
      </form>
      {/* 3. Handle edge cases & zero state & error states*/}
      {(!todos || todos.length === 0 || errors) && (
        <div>
          <p>No todos, please add one.</p>
        </div>
      {/* 4. Display todos*/}
        {todos.map((todo) => {
          return <li style={{ listStyle: 'none' }}>{todo.name}</li>;
        })}
      </ul>

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!

Set up fullstack project

Deploy and host app