Skip to main content

Storefront API
API

Querying the Storefront API.

Anchor to standardapiStandardApi

The base API object provided to this and other customer-account extension targets.

Anchor to query
query
<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: ; }) => Promise<{ data?: Data; errors?: []; }>
required

Used to query the Storefront GraphQL API with a prefetched token.

See storefront api access examples for more information.

Was this section helpful?

Access the Storefront API with query

import {useEffect, useState} from 'react';
import {
useApi,
reactExtension,
List,
ListItem,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.order-status.block.render',
() => <Extension />,
);

function Extension() {
const [data, setData] = useState();
const {query} = useApi();

useEffect(() => {
query(
`query ($first: Int!) {
products(first: $first) {
nodes {
id
title
}
}
}`,
{
variables: {first: 5},
},
)
.then(({data, errors}) => setData(data))
.catch(console.error);
}, [query]);

return (
<List>
{data?.products?.nodes.map((node) => (
<ListItem key={node.id}>
{node.title}
</ListItem>
))}
</List>
);
}

Anchor to examplesExamples

Anchor to example-accessing-the-storefront-api-with-fetch()Accessing the Storefront API with fetch()

You can access the Storefront GraphQL API using global fetch(). Ensure your extension can access the Storefront API via the api_access capability.

Was this section helpful?

Accessing the Storefront API with fetch()

import {useEffect, useState} from 'react';
import {
reactExtension,
List,
ListItem,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.order-status.block.render',
() => <Extension />,
);

function Extension() {
const [data, setData] = useState();

useEffect(() => {
const getProductsQuery = {
query: `query ($first: Int!) {
products(first: $first) {
nodes {
id
title
}
}
}`,
variables: {first: 5},
};

const apiVersion = 'unstable';

fetch(
`shopify://storefront/api/${apiVersion}/graphql.json`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(getProductsQuery),
},
)
.then((response) => response.json())
.then(({data, errors}) => setData(data))
.catch(console.error);
}, []);

return (
<List>
{data?.products?.nodes.map((node) => (
<ListItem key={node.id}>
{node.title}
</ListItem>
))}
</List>
);
}