Customer Profile

The customer's profile is derived from their billing address. The framework provides some components and hooks to assist with displaying and editing these details.


Queries for the customer and returns it along with extracted billing address details.


This hook takes an options object with the following keys:

query: DocumentNode The customer graphql query. This must include at least the customer and billingAddress fields. The default query is located at template-trend/src/components/MyPages/customerProfileQuery.gql


The hook returns an object containing the following keys:

billingAddress: { id: string, value: string }[] An array containing the customer's billing address details.

customer: Customer The full customer object, as queried.

refetch, loading, error The same functions and values as returned from the Apollo Query component's render prop function

Example usage:

const { billingAddress, loading, error, customer } = useCustomerQuery({
  query: customerProfileQuery,

if (loading) return "Loading…";
if (error) return <div style={errorStyle}>Something went wrong</div>;

return (
    Email: {}
      {{ id, value }) => {
        return (
          <Fragment key={id}>
Copyright © Norce 2023. All right reserved.