Storefront APIAPI
API
Querying the Storefront API.
Anchor to standardapiStandardApi
The base API object provided to purchase extension targets.
Anchor to query
query
<Data = unknown, Variables = Record<string, unknown>>(query: string, options?: { variables?: Variables; version?: ; }) => Promise<{ data?: Data; errors?: []; }>
required
The method used to query the Storefront GraphQL API with a prefetched token.
Refer to 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/checkout';
export default reactExtension(
'purchase.checkout.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 capability.
The shopify:storefront protocol will automatically infer your Storefront URL and API version declared in your extension config.
By omitting the API version (recommended), Shopify will use your API version configured in shopify.extension.toml. To change the API version, simply add it to the URL like .
See Storefront GraphQL API endpoints for more information.
Was this section helpful?
Accessing the Storefront API with fetch()
import {useEffect, useState} from 'react';
import {
useApi,
reactExtension,
List,
ListItem,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const {shop} = useApi();
const [data, setData] = useState();
useEffect(() => {
const getProductsQuery = {
query: `query ($first: Int!) {
products(first: $first) {
nodes {
id
title
}
}
}`,
variables: {first: 5},
};
fetch('shopify:storefront/api/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>
);
}
