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

  React

  import {useEffect, useState} from 'react';
  import {
    useApi,
    reactExtension,
    List,
    ListItem,
  } from '@shopify/ui-extensions-react/customer-account';
  
  export default reactExtension(
    'customer-account.order-status.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/customer-account';
  
  export default extension(
    'customer-account.order-status.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);
    },
  );
  

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

  React

  import {useEffect, useState} from 'react';
  import {
    reactExtension,
    List,
    ListItem,
  } from '@shopify/ui-extensions-react/customer-account';
  
  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );
  
  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 (
      <List>
        {data?.products?.nodes.map((node) => (
          <ListItem key={node.id}>
            {node.title}
          </ListItem>
        ))}
      </List>
    );
  }
  

  JavaScript

  import {
    extension,
    List,
    ListItem,
  } from '@shopify/ui-extensions/customer-account';
  
  export default extension(
    'customer-account.order-status.block.render',
    (root) => {
      const apiVersion = 'unstable';
      const getProductsQuery = {
        query: `query ($first: Int!) {
        products(first: $first) {
          nodes {
            id
            title
          }
        }
      }`,
        variables: {first: 5},
      };
  
      fetch(
        `shopify://storefront/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);
    },
  );