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()
Preact
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
Accessing the Customer Account API with fetch()
description
You can access the [Customer Account GraphQL API](/docs/api/customer) using the global `fetch()`.
Preact
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; }
