Storefront API

Examples

• Description

  Load storefront data using the built-in `query()` helper. This example calls `shopify.query()` with a products query and renders the results as a list, using variables to control the number of items returned.

  jsx

  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(() => {
      shopify
        .query(
          `query ($first: Int!) {
          products(first: $first) {
            nodes {
              id
              title
            }
          }
        }`,
          {
            variables: {first: 5},
          },
        )
        .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>
    );
  }

• Description

  Access the Storefront GraphQL API using global `fetch()` with the `shopify:storefront` protocol. This approach automatically infers your Storefront URL and uses the API version declared in `shopify.extension.toml`. You can override the version by adding it to the URL, like `shopify:storefront/api/2024-04/graphql.json`.

  jsx

  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>
    );
  }