Storefront APIAPI
API
Querying the Storefront API.
Anchor to standardapiStandardApi
The base API object provided to purchase extension targets.
- Anchor to queryquery<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.
Docs_Standard_QueryApi
- query
The method used to query the Storefront GraphQL API with a prefetched token. Refer to [Storefront API access examples](/docs/api/checkout-ui-extensions/apis/storefront-api) for more information.
<Data = unknown, Variables = Record<string, unknown>>(query: string, options?: { variables?: Variables; version?: StorefrontApiVersion; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>
export interface Docs_Standard_QueryApi extends Pick<StandardApi, 'query'> {}StorefrontApiVersion
Union of supported storefront API versions
'2022-04' | '2022-07' | '2022-10' | '2023-01' | '2023-04' | '2023-07' | '2024-01' | '2024-04' | '2024-07' | 'unstable'GraphQLError
GraphQL error returned by the Shopify Storefront APIs.
- extensions
{ requestId: string; code: string; } - message
string
export interface GraphQLError {
message: string;
extensions: {
requestId: string;
code: string;
};
}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>
);
}
examples
Access the Storefront API with query
description
You can access the [Storefront GraphQL API](/docs/api/storefront) via the `query()` helper function. Ensure your extension can use this API by [enabling the `api_access` capability](/docs/api/checkout-ui-extensions/configuration#api-access).
React
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> ); }JavaScript
import { extension, List, ListItem, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, {query}) => { query<any>( `query ($first: Int!) { products(first: $first) { nodes { id title } } }`, { variables: {first: 5}, }, ) .then(({data}) => { const listItems = data?.products?.nodes.map((node) => root.createComponent( ListItem, undefined, node.title, ), ); root.appendChild( root.createComponent( List, undefined, listItems, ), ); }) .catch(console.error); }, );
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.
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},
};
const apiVersion = 'unstable';
fetch(
`${shop.storefrontUrl}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);
}, [shop]);
return (
<List>
{data?.products?.nodes.map((node) => (
<ListItem key={node.id}>
{node.title}
</ListItem>
))}
</List>
);
}
examples
Accessing the Storefront API with fetch()
description
You can access the [Storefront GraphQL API](/docs/api/storefront) using global `fetch()`. Ensure your extension can access the Storefront API via the [`api_access` capability](/docs/api/checkout-ui-extensions/configuration#api-access).
React
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}, }; const apiVersion = 'unstable'; fetch( `${shop.storefrontUrl}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); }, [shop]); return ( <List> {data?.products?.nodes.map((node) => ( <ListItem key={node.id}> {node.title} </ListItem> ))} </List> ); }JavaScript
import { extension, List, ListItem, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, {shop}) => { const apiVersion = 'unstable'; const getProductsQuery = { query: `query ($first: Int!) { products(first: $first) { nodes { id title } } }`, variables: {first: 5}, }; fetch( `${shop.storefrontUrl}api/${apiVersion}/graphql.json`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(getProductsQuery), }, ) .then((response) => response.json()) .then(({data}) => { const listItems = data?.products?.nodes.map((node) => root.createComponent( ListItem, undefined, node.title, ), ); root.appendChild( root.createComponent( List, undefined, listItems, ), ); }) .catch(console.error); }, );
