export const meta = {
  title: `Building a Form API with GraphQL`,
  description: `How to implement pagination with GraphQL`,
};

In this guide you will learn how to build and interact with a Form API using Amplify.

The API that you will create is for a basic contact form. The form will allow the user to input their name and phone number, and for us to query for the list of contacts.

### Getting started

To get started, create a new Amplify project:

```sh
amplify init

# Choose your environment name and default text editor
# You can answer the defaults for the rest of the questions and then choose the AWS profile you'd like to use for this project.
```

Next, create a GraphQL API:

```sh
amplify add api

? Please 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:
  > Name
? Provide API name:
  > contactapi
? Here is the GraphQL API that we will create. Select a setting to edit or continue:
  > Authorization modes: API key (default, expiration time: 7 days from now)
? Choose the default authorization type for the API:
  > API key
? Enter a description for the API key:
  > public
? After how many days from now the API key should expire (1-365):
  > 365
? Configure additional auth types?
  > No
? 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)
? Do you want to edit the schema now?
  > Yes
```

The CLI should open the GraphQL schema, located at __amplify/backend/api/contactapi/schema.graphql__, in your text editor. Update the schema with the following and save the file:

```graphql
type Contact @model(mutations: {
  create: "createContact"
}) {
  id: ID!
  name: String!
  phone: String!
}
```

<Callout>

In the above schema, we've overriding the default mutations and are specifying that only the `createContact` mutation be allowed to be created. By doing this, the API does not allow users to update or delete contacts. For more fine grained authorization rules, check out the [@auth directive](/cli/graphql/authorization-rules).

</Callout>

Next, deploy the API:

```sh
amplify push --y
```

### Interacting the API

To create a new contact, you can use the `createContact` mutation:

```graphql
mutation createContact {
  createContact(input: {
    name: "Chris"
    phone: "+1-555-555-5555"
  }) {
    id
    name
    phone
  }
}
```

To query for a list of contacts, you can use the `listContacts` query:

```graphql
query listContacts {
  listContacts {
    items {
      id
      name
      phone
    }
  }
}
```

import js0 from "/src/fragments/guides/api-graphql/js/building-a-form-api.mdx";

<Fragments fragments={{js: js0}} />