Connect your app code to the API

In this guide, you will connect your application code to the backend API using the Amplify Libraries. We will review how to install and configure Amplify Libraries.

Before you begin, you will need:

• An GraphQL API already set up either via the Amplify CLI, or directly via the underlying AWS AppSync service.
• A frontend application set up. For instructions on setting up an app, see Project Setup: Create your application
• npm installed

Install the Amplify Library

The Amplify Library is the recommended client library used to connect to your GraphQL APIs. To install the the Amplify client library, navigate to your frontend's root folder and run the following command in your Terminal:

npm install aws-amplify@^5

Configure the Amplify Library

You will then configure the library to connect with the Amplify CLI-provisioned API or you existing AppSync GraphQL API:

import { Amplify } from 'aws-amplify'
Copy highlighted code example
import awsconfig from './aws-exports'

Copy highlighted code example
Amplify.configure(awsconfig)

import { Amplify } from 'aws-amplify'

Amplify.configure({
Copy highlighted code example
  aws_appsync_graphqlEndpoint: 'https://abcxyz.appsync-api.us-east-1.amazonaws.com/graphql',
  aws_appsync_region: 'us-east-1',
})

import { Amplify } from 'aws-amplify'

Amplify.configure({
  aws_appsync_graphqlEndpoint: 'https://abcxyz.appsync-api.us-east-1.amazonaws.com/graphql',
  aws_appsync_region: 'us-east-1',

  // Set the auth type as "API_KEY" and pass in the API key value
Copy highlighted code example
  aws_appsync_authenticationType: 'API_KEY',
  aws_appsync_apiKey: 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx'
})

import { Amplify } from 'aws-amplify'

Amplify.configure({
  aws_appsync_graphqlEndpoint: 'https://abcxyz.appsync-api.us-east-1.amazonaws.com/graphql',
  aws_appsync_region: 'us-east-1',

  // Set the auth type as "AMAZON_COGNITO_USER_POOLS"
Copy highlighted code example
  aws_appsync_authenticationType: 'AMAZON_COGNITO_USER_POOLS',
})

import { Amplify } from 'aws-amplify'

Amplify.configure({
  aws_appsync_graphqlEndpoint: 'https://abcxyz.appsync-api.us-east-1.amazonaws.com/graphql',
  aws_appsync_region: 'us-east-1',

  // Set the auth type as "AWS_IAM"
Copy highlighted code example
  aws_appsync_authenticationType: 'AWS_IAM',
})

import { Amplify } from 'aws-amplify'

Amplify.configure({
  aws_appsync_graphqlEndpoint: 'https://abcxyz.appsync-api.us-east-1.amazonaws.com/graphql',
  aws_appsync_region: 'us-east-1',

  // Set the auth type as "OPENID_CONNECT"
Copy highlighted code example
  aws_appsync_authenticationType: 'OPENID_CONNECT',
})

import { Amplify } from 'aws-amplify'

Amplify.configure({
  aws_appsync_graphqlEndpoint: 'https://abcxyz.appsync-api.us-east-1.amazonaws.com/graphql',
  aws_appsync_region: 'us-east-1',

  // Set the auth type as "AWS_LAMBDA"
Copy highlighted code example
  aws_appsync_authenticationType: 'AWS_LAMBDA',
})

const getAuthToken = () => 'myAuthToken';
const lambdaAuthToken = getAuthToken();

const createdTodo = await client.graphql({
  query: queries.listTodos,
Copy highlighted code example
  authToken: lambdaAuthToken
});

Generate GraphQL client code and typings

You can generate common GraphQL queries, mutations, and subscriptions directly from your backend GraphQL schema. This allows you to avoid hand-authoring GraphQL documents from scratch when developing your API quickly and also provides you end-to-end typing.

amplify push

? 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

amplify update codegen

npx @aws-amplify/cli codegen add --apiId <...> --region <...>

npx @aws-amplify/cli codegen

Use generated GraphQL queries, mutations, and subscriptions

You can use the generated GraphQL code after you import them into your codebase and pass them into the API.graphql() operation. With GraphQL, you typically have the following types of operations to interact with the API from a JavaScript client:

• Mutations - write data to the API (create, update, and delete operations)

import { API } from 'aws-amplify';
import { createTodo, updateTodo, deleteTodo } from './graphql/mutations';
import { GraphQLQuery } from '@aws-amplify/api';
import { CreateTodoInput, CreateTodoMutation, UpdateTodoMutation, DeleteTodoMutation } from './API';

const todo: CreateTodoInput = { name: "My first todo", description: "Hello world!" };

/* create a todo */
await API.graphql<GraphQLQuery<CreateTodoMutation>>({
  query: createTodo,
  variables: {
    input: todo
  }
});

/* update a todo */
await API.graphql<GraphQLQuery<UpdateTodoMutation>>({
  query: updateTodo,
  variables: {
    input: {
      id: "ENTER_TODO_ID_HERE",
      name: "Updated todo info"
    }
  }
});

/* delete a todo */
await API.graphql<GraphQLQuery<DeleteTodoMutation>>({
  query: deleteTodo,
  variables: {
    input: {
      id: "ENTER_TODO_ID_HERE"
    }
  }
});

import { API } from 'aws-amplify';
import { createTodo, updateTodo, deleteTodo } from './graphql/mutations';

const todo = { name: "My first todo", description: "Hello world!" };

/* create a todo */
await API.graphql({
  query: createTodo,
  variables: {
    input: todo
  }
});

/* update a todo */
await API.graphql({
  query: updateTodo,
  variables: {
    input: {
      id: "ENTER_TODO_ID_HERE",
      name: "Updated todo info"
    }
  }
});

/* delete a todo */
await API.graphql({
  query: deleteTodo,
  variables: {
    input: {
      id: "ENTER_TODO_ID_HERE"
    }
  }
});

• Queries - read data from the API (list and get operations)

import { API } from 'aws-amplify';
import { GraphQLQuery } from '@aws-amplify/api';
import { listTodos } from './graphql/queries';
import { ListTodosQuery } from './API';

const todos = await API.graphql<GraphQLQuery<ListTodosQuery>>({ query: listTodos });

import { API } from 'aws-amplify';
import { listTodos } from './graphql/queries';

const todos = await API.graphql({ query: listTodos });

To learn more about queries, mutations, and subscriptions in more detail, see the guides to Create, update, and delete application data and Read application data.

Conclusion

Congratulations! You have finished the Connect your app code to the API guide. In this guide, you reviewed the required configuration and installed and configured Amplify Libraries. You also reviewed some quick ways to write and read this data.

Next steps

Our recommended next steps include using the API to mutate and query data. You can also review how to subscribe to real-time events to look for mutations in your data. Some resources that will help with this work include:

• Create, update, and delete application data
• Read application data
• Subscribe to real-time events