Storefront API

Examples

• Extension.jsx

  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/customer-account-ui-extensions/configuration#api-access).

  Default

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

• 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/customer-account-ui-extensions/configuration#api-access).

  Extension.jsx

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