Customer Account API

Examples

• Description

  Query the buyer's name from the GraphQL Customer Account API. This example uses `fetch()` with a GraphQL query for `customer { firstName lastName }` and displays the result with `useState` and `useEffect`.

  jsx

  import '@shopify/ui-extensions/preact';
  import {render} from 'preact';
  import {useState, useEffect} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  const API_VERSION = '2025-10';
  
  function Extension() {
    const [name, setName] = useState(null);
  
    useEffect(() => {
      fetch(
        `shopify://customer-account/api/${API_VERSION}/graphql.json`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            query: `query {
              customer {
                firstName
                lastName
              }
            }`,
          }),
        },
      )
        .then((response) => response.json())
        .then(({data: {customer}}) => {
          setName(customer);
        })
        .catch(console.error);
    }, []);
  
    if (!name) {
      return <s-text>Loading…</s-text>;
    }
  
    return (
      <s-box padding="base">
        <s-text type="strong">
          Hello, {name.firstName} {name.lastName}!
        </s-text>
      </s-box>
    );
  }

• Description

  Fetch the buyer's past orders to display a purchase history. This example sends a GraphQL query for the last five orders and renders each order's name and total price.

  jsx

  import '@shopify/ui-extensions/preact';
  import {render} from 'preact';
  import {useState, useEffect} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  const API_VERSION = '2025-10';
  
  function Extension() {
    const [orders, setOrders] = useState(null);
  
    useEffect(() => {
      fetch(
        `shopify://customer-account/api/${API_VERSION}/graphql.json`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            query: `query {
              customer {
                orders(first: 5) {
                  edges {
                    node {
                      name
                      totalPrice {
                        amount
                      }
                    }
                  }
                }
              }
            }`,
          }),
        },
      )
        .then((response) => response.json())
        .then(({data: {customer}}) => {
          if (!customer) return;
          setOrders(
            customer.orders.edges.map(
              (edge) => edge.node,
            ),
          );
        })
        .catch(console.error);
    }, []);
  
    if (!orders) {
      return <s-text>Loading orders…</s-text>;
    }
  
    return (
      <s-box padding="base">
        <s-stack direction="block" gap="small-200">
          <s-text type="strong">
            Recent Orders
          </s-text>
          {orders.map((order) => (
            <s-stack
              key={order.name}
              direction="inline"
              gap="base"
            >
              <s-text type="strong">
                {order.name}
              </s-text>
              <s-text>
                ${order.totalPrice.amount}
              </s-text>
            </s-stack>
          ))}
        </s-stack>
      </s-box>
    );
  }

• Description

  Retrieve the buyer's saved addresses from their customer account. This example queries `customer { addresses }` via the GraphQL API and displays each address.

  jsx

  import '@shopify/ui-extensions/preact';
  import {render} from 'preact';
  import {useState, useEffect} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  const API_VERSION = '2025-10';
  
  function Extension() {
    const [addresses, setAddresses] =
      useState(null);
  
    useEffect(() => {
      fetch(
        `shopify://customer-account/api/${API_VERSION}/graphql.json`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            query: `query {
              customer {
                addresses(first: 5) {
                  edges {
                    node {
                      address1
                      city
                      zoneCode
                    }
                  }
                }
              }
            }`,
          }),
        },
      )
        .then((response) => response.json())
        .then(({data: {customer}}) => {
          if (!customer) return;
          setAddresses(
            customer.addresses.edges.map(
              (edge) => edge.node,
            ),
          );
        })
        .catch(console.error);
    }, []);
  
    if (!addresses) {
      return <s-text>Loading addresses…</s-text>;
    }
  
    if (addresses.length === 0) {
      return (
        <s-text color="subdued">
          No saved addresses found.
        </s-text>
      );
    }
  
    return (
      <s-box padding="base">
        <s-stack direction="block" gap="base">
          <s-text type="strong">
            Saved Addresses
          </s-text>
          {addresses.map((address, index) => (
            <s-box key={index} padding="small-200">
              <s-stack
                direction="block"
                gap="small-200"
              >
                <s-text>{address.address1}</s-text>
                <s-text>
                  {address.city},{' '}
                  {address.zoneCode}
                </s-text>
              </s-stack>
            </s-box>
          ))}
        </s-stack>
      </s-box>
    );
  }