> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Lab - Query Practice

Plan: Developer Foundations

Lesson 26 of 28 · 30 min

Customer Management

### **In this lab, you will:**

* Register a customer
* Update a customer
* Add a customer address
* Update a customer address
* Delete a customer address
* Change a customer password
* Request a password reset
* Reset a password

## Query Custom Form Fields

1. **Log in** to your store to access the control panel
2. In the control panel, **navigate** to *Settings > Storefront API Playground*
3. **Copy** and **paste** the following query into the playground

```graphql showLineNumbers={false}
query MyQuery {
  site {
    settings {
      formFields {
        customer(filters: {isBuiltIn: false}) {
          __typename
          entityId
          label
          sortOrder
          isBuiltIn
          isRequired
          ... on RadioButtonsFormField {
            options {
              entityId
              label
            }
          }
          ... on PicklistFormField {
            options {
              entityId
              label
            }
          }
          ... on DateFormField {
            defaultDate
            minDate
            maxDate
          }
        }
      }
    }
  }
}
```

4. **Click** the play button to submit the request
5. **View** your response - GraphQL will return a list of form fields you have enabled in the storefront

## Register a Customer

1. **Open** a new tab for your Customer Registration Mutation
2. **Copy** and **paste** the code below into the playground

```graphql showLineNumbers={false}
mutation RegisterCustomer(
  $firstName: String!,
  $lastName: String!,
  $email: String!,
  $password: String!,
  $multipleChoices: [MultipleChoiceFormFieldInput!],
  $dates: [DateFormFieldInput!],
  $texts: [TextFormFieldInput!]
) {
  customer {
    registerCustomer(
      input: {
        firstName: $firstName,
        lastName: $lastName,
        email: $email,
        password: $password,
        formFields: {
          multipleChoices: $multipleChoices,
          dates: $dates,
          texts: $texts
        }
      }
    ) {
      customer {
        entityId
      }
    }
  }
}
```

3. **Enter** the following in the GraphQL Variables section of the playground. You can change the customer name details to values for the customer you want to add. The values previously prepared when customer Form Fields were queried will be passed in for the various field entries; any value types for which you do not have corresponding fields will simply receive an empty array.

```json showLineNumbers={false}
{
    "firstName": "John",
    "lastName": "Doe",
    "email": "{{customer_email}}",
    "password": "{{customer_password}}",
    "multipleChoices": {{customer_multiple_choices}},
    "dates": {{customer_dates}},
    "texts": {{customer_texts}}
}
```

4. **Click** the play button to submit the request
5. **View** your response

```json showLineNumbers={false}
{
  "data": {
    "customer": {
      "registerCustomer": {
        "customer": {
          "entityId": 36
        }
      }
    }
  }
}
```

6. (Optional) **Navigate** to *Control panel > Customers > View* to see the newly registered customer

## Log in a Customer

Before we move on to the next steps in the lab, you need to log in as the customer you just created.

1. **Open** a new tab for your Customer Update Mutation
2. **Copy** and **paste** the code below into the playground

```graphql showLineNumbers={false}
mutation CustomerLogin($email: String!, $password: String!) {
  login(email: $email, password: $password) {
    customer {
      entityId
      firstName
      lastName
    }
  }
}
```

3. **Enter** the following in the GraphQL Variables section of the playground. Change the email and password values to those that belong to the customer.

```json showLineNumbers={false}
{"email":"customer email address", "password": "customer password"}
```

4. **Click** the play button to submit the request
5. **View** your response

```json showLineNumbers={false}
{
  "data": {
    "login": {
      "customer": {
        "entityId": 36,
        "firstName": "Elizabeth",
        "lastName": "Right"
      }
    }
  }
}
```

## Update a Customer

This step will walk you through updating customer information with the GraphQL Storefront API. This is only for customer information (name, phone number, company, etc.), not for changing a password or updating an address.

1. **Open** a new tab for your Customer Update Mutation
2. **Copy** and **paste** the code below into the playground

```graphql showLineNumbers={false}
mutation UpdateCustomer(
  $firstName: String!,
  $lastName: String!,
  $email: String!,
  $company: String!
) {
  customer {
    updateCustomer(
      input: {
        firstName: $firstName,
        lastName: $lastName,
        email: $email,
        company: $company,
      }
    ) {
      customer {
        entityId
      }
    }
  }
}
```

3. Enter the following in the GraphQL Variables section of the playground. You can change the details to values for the customer you want to update.

```json showLineNumbers={false}
{
  "firstName": "John",
  "lastName": "Doe",
  "email": "{{customer email}}",
  "company":"{{company name}}"
}
```

4. **Click** the play button to submit the request
5. **View** your response

```json showLineNumbers={false}
{
  "data": {
    "customer": {
      "updateCustomer": {
        "customer": {
          "entityId": 31
        }
      }
    }
  }
}
```

## Add a Customer Address

Customers can be associated with one or more addresses. This step will walk you through adding an address for an existing customer.

1. **Open** a new tab for your new mutation
2. **Copy** and **paste** the code below into the playground

```graphql showLineNumbers={false}
mutation AddCustomerAddress(
  $firstName: String!,
  $lastName: String!,
  $address1: String!,
  $city: String!,
  $countryCode: String!,
  $stateOrProvince: String,
  $postalCode: String
) {
  customer {
    addCustomerAddress(
      input: {
        firstName: $firstName,
        lastName: $lastName,
        address1: $address1,
        city: $city,
        countryCode: $countryCode,
        stateOrProvince: $stateOrProvince,
        postalCode: $postalCode
      }
    ) {
      address {
        entityId
      }
    }
  }
}
```

3. Enter the following in the GraphQL Variables section of the playground. You can change the details to values for the address you want to add.

```json showLineNumbers={false}
{
    "firstName": "John",
    "lastName": "Doe",
    "address1": "123 Park Central East",
    "city": "Austin",
    "countryCode": "US",
    "stateOrProvince": "Texas",
    "postalCode": "78726"
}
```

4. **Click** the play button to submit the request
5. **View** your response

```json showLineNumbers={false}
{
  "data": {
    "customer": {
      "addCustomerAddress": {
        "address": {
          "entityId": 36
        }
      }
    }
  }
}
```

6. **Save** the `entityId` for the next lab step

## Update a Customer Address

This step will walk you through updating a customer's existing address.

1. **Open** a new tab for your new mutation
2. **Copy** and **paste** the code below into the playground

```graphql showLineNumbers={false}
mutation UpdateCustomerAddress(
  $addressId: String!,
  $firstName: String!,
  $lastName: String!,
  $address1: String!,
  $city: String!,
  $countryCode: String!,
  $stateOrProvince: String,
  $postalCode: String
){
  customer {
    updateCustomerAddress(
    input: {
        addressEntityId: $addressId,
        data: {
        firstName: "Sam",
        lastName: "Right",
        address1: "1923 Fake Street",
        address2: "",
        city: "Austin",
        company: "BC",
        countryCode: "US",
        stateOrProvince: "TX",
        phone: "123-456-7890",
        postalCode: "78610"
    ) {
      address {
        entityId
      }
    }
  }
}
```

3. **Enter** the following in the GraphQL Variables section of the playground. The `addressId` will be the `addressEntityId` that was returned in the previous step. You can change the details to values for the address you want to update.

```json showLineNumbers={false}
{
  "addressId": "36",
  "firstName": "John",
  "lastName": "Doe",
  "address1": "123 Park Central East",
  "city": "Austin",
  "countryCode": "US",
  "stateOrProvince": "Texas",
  "postalCode": "78726"
}
```

4. **Click** the play button to submit the request
5. **View** your response

## Delete a Customer Address

This step will walk you through deleting a customer's address from their account.

1. **Open** a new tab for your new mutation
2. **Copy** and **paste** the code below into the playground

```graphql showLineNumbers={false}
mutation MyMutation($addressId: Int!) {
  customer {
    deleteCustomerAddress(input: {addressEntityId: $addressId}) {
      errors {
        ... on CustomerNotLoggedInError {
          __typename
          message
        }
        ... on CustomerAddressDeletionError {
          __typename
          message
        }
      }
    }
  }
}
```

3. Enter the following in the GraphQL Variables section of the playground. The `addressId` will be the `addressEntityId` that was used in the previous step.

```json showLineNumbers={false}
{"addressId": 36}
```

4. **Click** the play button to submit the request
5. **View** your response

## Change a Customer Password

This mutation can be used to change a customer's password, but the user must know their password in order to successfully update their password.

1. **Copy** and **paste** the code below into the playground

```graphql showLineNumbers={false}
mutation MyMutation($currentPW: String!, $newPW: String!) {
  customer {
    changePassword(input: {currentPassword: $currentPW, newPassword: $newPW}) {
      errors {
        ... on ValidationError {
          __typename
          message
        }
        ... on CustomerDoesNotExistError {
          __typename
          message
        }
        ... on CustomerPasswordError {
          __typename
          message
        }
        ... on CustomerNotLoggedInError {
          __typename
          message
        }
      }
    }
  }
}
```

2. **Enter** the following in the GraphQL Variables section of the playground. Change the current and new password values.

```json showLineNumbers={false}
{"currentPW":{{current password}}, "newPW":{{new password}} }
```

3. **Click** the play button to submit the request
4. **View** your response

## Request a Password Reset

This step will walk you through requesting a password reset email.

1. **Copy** and **paste** the code below into the playground

```graphql showLineNumbers={false}
mutation MyMutation($email: String!) {
  customer {
    requestResetPassword(input: {email: $email}) {
      errors {
        ... on ValidationError {
          __typename
        }
      }
    }
  }
}
```

2. **Enter** the following in the GraphQL Variables section of the playground. Change the customer's email address.

```json showLineNumbers={false}
{"email":"your customer's email address"}
```

3. **Click** the play button to submit the request
4. **View** your response

```json showLineNumbers={false}
{
  "data": {
    "customer": {
      "requestResetPassword": {
        "errors": []
      }
    }
  }
}
```

## Reset a Password

This mutation is used to complete a password reset and you do not need to know the customer's current password.

1. **Copy** and **paste** the code below into the playground

```graphql showLineNumbers={false}
mutation ($customerId: Int!, $newPW: String!) {
  customer {
    resetPassword(
      input: {
        customerEntityId: $customerId
        token: ""
        newPassword: $newPW
      }
    ) {
      errors {
        ... on ValidationError {
          message
        }
        ... on ChangePasswordError {
          message
        }
      }
    }
  }
}
```

2. **Enter** the following in the GraphQL Variables section of the playground. Change the `customerEntityId` and the new password.

```json showLineNumbers={false}
{"customerId": 36, "newPW": "new password"}
```

3. **Click** the play button to submit the request
4. **View** your response