index.js

// src/pages/index.js

const Homepage = ({ location }) => {
  const {
    allCosmicjsProducts: { edges },
  } = useStaticQuery(graphql`
    query {
      allCosmicjsProducts {
        edges {
          node {
            content
            metadata {
              id
              image {
                imgix_url
                url
              }
              price
            }
            slug
            title
          }
        }
      }
    }
  `);

  return (
    <Layout location={location}>
      <Heading level="1">Latest Products</Heading>
      {edges.map(({ node }) => (
        <Product key={node.slug} product={node} url={location.href} />
      ))}
    </Layout>
  );
};