Storefront API

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).

  Preact

  import '@shopify/ui-extensions/preact';
  import {render} from 'preact';
  import {useEffect, useState} from 'preact/hooks';
  
  export default function extension() {
    render(<Extension />, document.body);
  }
  
  function Extension() {
    const {query} = shopify;
    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);
    }, [query]);
  
    return (
      <s-unordered-list>
        {data?.products?.nodes.map((node) => (
          <s-list-item key={node.id}>
            {node.title}
          </s-list-item>
        ))}
      </s-unordered-list>
    );
  }
  

• 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). 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 `shopify:storefront/api/2024-04/graphql.json`. See [Storefront GraphQL API endpoints](/docs/api/storefront#endpoints) for more information.

  Preact

  import '@shopify/ui-extensions/preact';
  import {render} from 'preact';
  import {useEffect, useState} from 'preact/hooks';
  
  export default function extension() {
    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},
      };
  
      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 (
      <s-unordered-list>
        {data?.products?.nodes.map((node) => (
          <s-list-item key={node.id}>
            {node.title}
          </s-list-item>
        ))}
      </s-unordered-list>
    );
  }