Shopify Storefront API

The useShopifyClient provides a client to access the Shopify Storefront API for the current store.

Example

In this example we query 10 products from Shopify and display their titles in a list.

import { gql, useShopifyClient } from "@instantcommerce/sdk";

interface ProductsConnection {
  edges: {
    node: {
      id: string;
      title: string;
    };
  }[];
}

interface Products {
  products: ProductsConnection;
}

const productsQuery = gql`
  query products {
    products(first: 10) {
      edges {
        node {
          id
          title
        }
      }
    }
  }
`;

export const CustomBlock = () => {
  const shopifyClient = useShopifyClient();

  const [products, setProducts] = useState<ProductsConnection>();

  const loadProducts = async () => {
    try {
      const result = await shopifyClient.request<Products>(productsQuery);

      setProducts(result.products);
    } catch (e) {
      console.log(e);
    }
  };

  useEffect(() => {
    loadProducts();
  }, []);

  return (
    <ul>
      {products?.edges?.map(({ node }) => (
        <li key={node.id}>{node.title}</li>
      ))}
    </ul>
  );
};