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