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.

useCustomerQuery()

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

Arguments

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

Returns

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:

Copy

Copied

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

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

return (
  <>
    Email: {customer.email}
    <dl>
      {billingAddress.map(({ id, value }) => {
        return (
          <Fragment key={id}>
            <dt>{id}</dt>
            <dd>{value}</dd>
          </Fragment>
        );
      })}
    </dl>
  </>
);