Lab - Query Practice | BigCommerce Developer Center

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

Login to your store to access the control panel
In the control panel, navigate to Settings > Storefront API Playground
Copy and paste the following query into the playground

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
          }
        }
      }
    }
  }
}

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

Register a Customer

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

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
      }
    }
  }
}

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.

{
    "firstName": "John",
    "lastName": "Doe",
    "email": "{{customer_email}}",
    "password": "{{customer_password}}",
    "multipleChoices": {{customer_multiple_choices}},
    "dates": {{customer_dates}},
    "texts": {{customer_texts}}
}

Click the play button to submit the request
View your response

{
  "data": {
    "customer": {
      "registerCustomer": {
        "customer": {
          "entityId": 36
        }
      }
    }
  }
}

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

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

mutation CustomerLogin($email: String!, $password: String!) {
  login(email: $email, password: $password) {
    customer {
      entityId
      firstName
      lastName
    }
  }
}

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

{"email":"customer email address", "password": "customer password"}

Click the play button to submit the request
View your response

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

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

mutation UpdateCustomer(
  $firstName: String!,
  $lastName: String!,
  $email: String!,
  $company: String!
) {
  customer {
    updateCustomer(
      input: {
        firstName: $firstName,
        lastName: $lastName,
        email: $email,
        company: $company,
      }
    ) {
      customer {
        entityId
      }
    }
  }
}

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.

{
  "firstName": "John",
  "lastName": "Doe",
  "email": "{{customer email}}",
  "company":"{{company name}}"
}

Click the play button to submit the request
View your response

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

Open a new tab for your new mutation
Copy and paste the code below into the playground

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
      }
    }
  }
}

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.

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

Click the play button to submit the request
View your response

{
  "data": {
    "customer": {
      "addCustomerAddress": {
        "address": {
          "entityId": 36
        }
      }
    }
  }
}

Save the entityId for the next lab step

Update a Customer Address

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

Open a new tab for your new mutation
Copy and paste the code below into the playground

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
      }
    }
  }
}

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.

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

Click the play button to submit the request
View your response

Delete a Customer Address

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

Open a new tab for your new mutation
Copy and paste the code below into the playground

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

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

{"addressId": 36}

Click the play button to submit the request
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.

Copy and paste the code below into the playground

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
        }
      }
    }
  }
}

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

{"currentPW":{{current password}}, "newPW":{{new password}} }

Click the play button to submit the request
View your response

Request a Password Reset

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

Copy and paste the code below into the playground

mutation MyMutation($email: String!) {
  customer {
    requestResetPassword(input: {email: $email}) {
      errors {
        ... on ValidationError {
          __typename
        }
      }
    }
  }
}

Enter the following in the GraphQL Variables section of the playground. Change the customer’s email address.

{"email":"your customer's email address"}

Click the play button to submit the request
View your response

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

Copy and paste the code below into the playground

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

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

{"customerId": 36, "newPW": "new password"}

Click the play button to submit the request
View your response