Customer Account APIAPI
API
Create unique customer experiences with the Customer Account API. The API offers a full range of options making it possible for customers to view their orders, manage their profile and much more.
Was this section helpful?
Anchor to examplesExamples
Anchor to example-accessing-the-customer-account-api-with-fetch()Accessing the Customer Account API with fetch()
You can access the Customer Account GraphQL API using the global fetch().
Was this section helpful?
Accessing the Customer Account API with fetch()
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;
}
