---
title: Storefront API
description: Querying the Storefront API.
api_version: 2025-01
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/storefront-api
  md: https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/storefront-api.md
---

# Storefront APIAPI

Querying the Storefront API.

## StandardApi

The base API object provided to `purchase` extension targets.

* query

  \<Data = unknown, Variables = Record\<string, unknown>>(query: string, options?: { variables?: Variables; version?: StorefrontApiVersion; }) => Promise<{ data?: Data; errors?: GraphQLError\[]; }>

  required

  The method used to query the Storefront GraphQL API with a prefetched token.

  Refer to [Storefront API access examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/storefront-api) for more information.

### StorefrontApiVersion

Union of supported storefront API versions

```ts
'2022-04' | '2022-07' | '2022-10' | '2023-01' | '2023-04' | '2023-07' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable'
```

### GraphQLError

GraphQL error returned by the Shopify Storefront APIs.

* extensions

  ```ts
  { requestId: string; code: string; }
  ```

* message

  ```ts
  string
  ```

```ts
export interface GraphQLError {
  message: string;
  extensions: {
    requestId: string;
    code: string;
  };
}
```

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

  ##### React

  ```jsx
  import {useEffect, useState} from 'react';
  import {
    useApi,
    reactExtension,
    List,
    ListItem,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.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

  ```js
  import {
    extension,
    List,
    ListItem,
  } from '@shopify/ui-extensions/checkout';

  export default extension(
    'purchase.checkout.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);
    },
  );
  ```

## Examples

Accessing the Storefront API with fetch()

You can access the [Storefront GraphQL API](https://shopify.dev/docs/api/storefront) using global `fetch()`. Ensure your extension can access the Storefront API via the [`api_access` capability](https://shopify.dev/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](https://shopify.dev/docs/api/storefront#endpoints) for more information.

### Examples

* #### 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.

  ##### React

  ```jsx
  import {useEffect, useState} from 'react';
  import {
    useApi,
    reactExtension,
    List,
    ListItem,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    const {shop} = useApi();
    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 (
      <List>
        {data?.products?.nodes.map((node) => (
          <ListItem key={node.id}>
            {node.title}
          </ListItem>
        ))}
      </List>
    );
  }
  ```

  ##### JavaScript

  ```js
  import {
    extension,
    List,
    ListItem,
  } from '@shopify/ui-extensions/checkout';

  export default extension(
    'purchase.checkout.block.render',
    (root) => {
      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}) => {
          const listItems =
            data?.products?.nodes.map((node) =>
              root.createComponent(
                ListItem,
                undefined,
                node.title,
              ),
            );

          root.appendChild(
            root.createComponent(
              List,
              undefined,
              listItems,
            ),
          );
        })
        .catch(console.error);
    },
  );
  ```

## Related

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/targets)

[ReferenceTargets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)

[![](https://shopify.dev/images/icons/32/apps.png)![](https://shopify.dev/images/icons/32/apps-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/components)

[ReferenceComponents](https://shopify.dev/docs/api/checkout-ui-extensions/components)

[![](https://shopify.dev/images/icons/32/gear.png)![](https://shopify.dev/images/icons/32/gear-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)

[ReferenceConfiguration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)

[![](https://shopify.dev/images/icons/32/tutorial.png)![](https://shopify.dev/images/icons/32/tutorial-dark.png)](https://shopify.dev/apps/checkout)

[LearnTutorials](https://shopify.dev/apps/checkout)