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

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 [data, setData] = useState({});

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

return (
<s-unordered-list>
{data?.products?.nodes.map((node) => {
return (
<s-list-item id={node.id} key={node.id}>
{node.title}
</s-list-item>
);
})}
</s-unordered-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()

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 [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 (
<s-unordered-list>
{data?.products?.nodes.map((node) => (
<s-list-item key={node.id}>
{node.title}
</s-list-item>
))}
</s-unordered-list>
);
}