updateCustomer

Method updating customer profile.

This method sends a POST request to the updateMyCustomer endpoint of the Vue Storefront API Middleware. In turn, it updates a customer profile in commercetools by sending a request to its GraphQL API. The default GraphQL query used by this method can be found here.

The list of available update actions which can be passed as the actions parameter can be found here. You can also refer to the examples below to learn about the most frequent use cases.

You might also want to see the customerUpdateMe method.

Signature

export declare function updateCustomer<Res extends PartialUpdateMyCustomerResponse = UpdateMyCustomerResponse>(
	params: UpdateMyCustomerParams,
	options?: MethodOptions<CustomQuery<"updateMyCustomer">>
): Promise<Res>;

Parameters

Name	Required	Type	Description
`params`	Required	`UpdateMyCustomerParams`	Parameter object which can be used with this method. Refer to its type definition to learn about possible properties.
`options`	Optional	`MethodOptions<CustomQuery<"updateMyCustomer">>`	Options that can be passed to additionally configure the request or customize the logic in a plugin.

Returns

Returns a representation of the UpdateMyCustomerResponse.

Referenced Types

Examples

Updating basic customer data.

import { sdk } from '~/sdk.config.ts';

const { user } = await sdk.commerce.updateCustomer({
  version: 123,
  actions: [
    { setFirstName: { firstName: 'John' } },
    { setLastName: { lastName: 'Doe' } },
    { setMiddleName: { middleName: 'Donald' } },
    { setSalutation: { salutation: 'Hello' } },
    { setTitle: { title: 'Mr' } },
    { setVatId: { vatId: '6514161212' }},
    { setCompanyName: { companyName: 'Vue Storefront' } },
    { setDateOfBirth: { dateOfBirth: '2015-10-21' } },
    { setLocale: { locale: 'de' } }
  ]
});

Updating customer email.

import { sdk } from '~/sdk.config.ts';

const { user } = await sdk.commerce.updateCustomer({
  version: 123,
  actions: [
    { changeEmail: { email: 'test@gmail.com' } }
  ]
});

Setting a Custom Type with Custom Fields on a customer. Before using this feature, you have to configure a proper Custom Type in commercetools. Also, the value property must be stringified!

import { sdk } from '~/sdk.config.ts';

const { user } = await sdk.commerce.updateCustomer({
  version: 123,
  actions: [
    {
      setCustomType: {
        typeKey: 'customer-custom-fields',
        fields: [
          { name: 'spiritAnimal', value: '"Dog"' },
          { name: 'favouriteSinger', value: '"Bono"' }
        ]
      }
    }
  ]
});

Setting Custom Fields on a customer who had already been assigned a Custom Type. Before using this feature, you have to configure a proper Custom Type in commercetools. Also, the value property must be stringified!

import { sdk } from '~/sdk.config.ts';

const { user } = await sdk.commerce.updateCustomer({
  version: 123,
  actions: [
    {
      setCustomField: { name: 'spiritAnimal', value: '"Dog2"' }
    },
    {
      setCustomField: { name: 'favouriteSinger', value: '"Bono2"' }
    }
  ]
});

Adding a customer address.

import { sdk } from '~/sdk.config.ts';

const address = { country: 'DE', key: 'my-address' };

const { user } = await sdk.commerce.updateCustomer({
  version: 123,
  actions: [
    { addAddress: { address } }
  ]
});

Updating a customer address. Bear in mind fields not included in the address object will be set to null by commercetools.

import { sdk } from '~/sdk.config.ts';

const { user } = await sdk.commerce.updateCustomer({
  version: 123,
  actions: [
    {
      changeAddress: {
        addressKey: 'my-address',
        address: { country: 'UK' }
      }
    }
  ]
});

Adding a shipping address.

import { sdk } from '~/sdk.config.ts';

const address = { country: 'DE', key: 'my-address' };

const { user } = await sdk.commerce.updateCustomer({
  version: 123,
  actions: [
    { addAddress: { address } },
    { addShippingAddressId: { addressKey: address.key } }
  ]
});

Setting the default shipping address.

import { sdk } from '~/sdk.config.ts';

const { user } = await sdk.commerce.updateCustomer({
  version: 123,
  actions: [
    { setDefaultShippingAddress: { addressKey: 'my-address' } }
  ]
});

Creating a custom GraphQL query for the method in middleware.config.js. We can use it to specify response fields as well as overwrite certain query variables.

module.exports = {
  integrations: {
    ct: {
      // ...
      customQueries: {
        'update-customer-custom-query': ({ variables, metadata }) => ({
          variables: Object.assign(variables, metadata?.variables),
          query: `
            mutation updateMyCustomer($version: Long!, $actions: [MyCustomerUpdateAction!]!, $storeKey: KeyReferenceInput) {
              user: updateMyCustomer(version: $version, actions: $actions, storeKey: $storeKey) {
                ${metadata?.fields}
              }
            }
          `
        })
      }
    }
  }
};

Updating customer's first name and selecting response fields using the custom GraphQL query from the previous example. Notice how we are using the type parameter to overwrite the default response interface.

import { sdk } from '~/sdk.config.ts';

type CustomUpdateMyCustomerResponse = {
  user: {
    id: string;
    version: string;
    firstName: string;
  }
}

const { cart } = await sdk.commerce.updateCustomer<CustomUpdateMyCustomerResponse>({
  version: 123,
  actions: [
    { setFirstName: { firstName: 'John' } }
  ]
}, {
  customQuery: {
    updateMyCustomer: 'update-customer-custom-query',
    metadata: {
      fields: 'id, version, firstName'
    }
  }
})