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.
You can access the Customer Account GraphQL API using the global fetch().
Was this section helpful?
Extension.jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useEffect, useState} from 'preact/hooks';
export default async () => {
render(<Extension />, document.body);
};
function Extension() {
const [customerName, setCustomerName] =
useState('');
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 ? (
<s-banner>
{shopify.i18n.translate('welcomeMsg', {
name: customerName,
})}
</s-banner>
) : null;
}
Examples
Extension.jsx
Default
import '@shopify/ui-extensions/preact'; import {render} from 'preact'; import {useEffect, useState} from 'preact/hooks'; export default async () => { render(<Extension />, document.body); }; function Extension() { const [customerName, setCustomerName] = useState(''); 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 ? ( <s-banner> {shopify.i18n.translate('welcomeMsg', { name: customerName, })} </s-banner> ) : null; }
