Customer Account API

Examples

• Accessing the Customer Account API with fetch()

  Description

  You can access the [Customer Account GraphQL API](/docs/api/customer) using the global `fetch()`.

  React

  import React, { useEffect, useState } from "react";
  import {
    Banner,
    reactExtension,
    useTranslate,
  } from "@shopify/ui-extensions-react/customer-account";
  
  export default reactExtension(
    "customer-account.order-status.block.render",
    () => <BlockExtension />
  );
  
  function BlockExtension() {
    const [customerName, setCustomerName] = useState("");
    const translate = useTranslate();
    const getCustomerNameQuery = {
      query: `query {
        customer {
          firstName
        }
      }`
    };
  
    useEffect(() => {
      fetch("shopify://customer-account/api/unstable/graphql.json",
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(getCustomerNameQuery),
        }).then((response) => response.json())
        .then(({data: { customer: {firstName}}}) => {
          setCustomerName(firstName)
        }).catch(console.error);
    });
  
    return customerName ? (
      <Banner>{translate('welcomeMsg', {name: customerName})}</Banner>
    ): null;
  }
  

  JavaScript

  import React from "react";
  import {
    Banner,
    extension,
  } from "@shopify/ui-extensions-react/customer-account";
  
  export default extension(
    "customer-account.order-status.block.render",
    (root, api) => {
    const getCustomerNameQuery = {
      query: `query {
        customer {
          firstName
        }
      }`
    };
  
    fetch("shopify://customer-account/api/unstable/graphql.json",
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(getCustomerNameQuery),
      }).then((response) => response.json())
      .then(({data: {customer: {firstName}}}) => {
        if (firstName) {
          root.appendChild(root.createComponent(Banner, {}, `${api.i18n.translate('welcomeMsg', {name: firstName})}` ));
        }
      }).catch(console.error);
  });