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;
}
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); });
