How do you use the Storefront API from a checkout UI extension?

Shopify Partner
59 6 16

The documentation surround use of the Storefront API is confusing to me and I'm not sure how/if I can use it within a checkout UI extension. 


On one hand, I've seen a couple examples of apps calling the Storefront API while also using checkout UI extensions, and some hints that this may be possible in threads like this:


On the other hand, I'm reading that the app must be turned into a sales channel (for public apps) in threads like this:

 enabled network_access for my extension and gave tried to call the Storefront API:


useEffect(() => {
    if (!isInitialized) {
      const testCall = async () => {
        const response = await fetch(
            method: 'POST',
            body: `
            query {
              products (first: 3) {
                edges {
                  node {
        const data = await response.json();
        console.log('data', data);
testCall(); } }, []);

but it returns a 403 error. 


I guess the points I'm trying to clear up are:


1. How can one call the Storefront API from a checkout UI extension?

2. Is converting the app into a Sales Channel necessary? It feels like quite a blocker if it is as I've read many apps having legitimate use-cases for the Storefront API but having their app rejected to become a Sales Channel because it doesn't fit the criteria for a Sales Channel. 



Reply 1 (1)

Shopify Partner
32 1 16

I was just looking through the documentation and there appears to be a way to do this see


import {useEffect, useState} from 'react';
import {
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
  () => <Extension />,
function Extension() {
  const [data, setData] = useState();
  const {query} = useApi();

  useEffect(() => {
      `query ($first: Int!) {
        products(first: $first) {
          nodes {
        variables: {first: 5},
      .then(({data, errors}) => setData(data))
  }, [query]);

  return (
      {data?.products? => (
        <ListItem key={}>