For example, if you were previously sending a request like this:

query productsWithImages {
   site {
     products {
       edges {
         cursor
         node {
           entityId
           name
          images { // will return 10 images unless explicit arguments are specified
            edges {
              node {
                url(width: 640)
              }
            }
          }
         }
       }
     }
   }
 }

You could instead send a request like this:

query productsWithImages {
   site {
     products(first: 5) { // as a best practice, use `first` on all collections to specify page size
       edges {
         cursor
         node {
           entityId
           name
          images (first:20) { // will return up to 20 images per product
            edges {
              node {
                url(width: 640)
              }
            }
          }
         }
       }
     }
   }
 }

Please note that requesting larger amounts of data with increased page sizes will factor into the GraphQL complexity calculation for your query.

• The Add to Cart URLs example now uses promises to demonstrate using JavaScript to make serial requests to a single endpoint.

• The Add Consignments to Checkout endpoint now reflects limits to the number of line items a consignment can contain.

Using this capability, you can fetch data a little bit more flexibly to build your themes.

Here’s an example of using a GraphQL query in Front Matter to fetch metafields in product.html:

---
product:
   videos:
       limit: {{theme_settings.productpage_videos_count}}
   reviews:
       limit: {{theme_settings.productpage_reviews_count}}
   related_products:
       limit: {{theme_settings.productpage_related_products_count}}
   similar_by_views:
       limit: {{theme_settings.productpage_similar_by_views_count}}
gql: "query productMetafieldsById($productId: Int!) {
  site {
    product(entityId: $productId) {
      metafields(namespace: \"my-namespace\") {
        edges {
          node {
            key
            value
          }
        }
      }
    }
  }
}
"
---

More information on how to use this new storefront capability is available here: https://developer.bigcommerce.com/stencil-docs/reference-docs/front-matter-reference#graphql-attributes

To get the content, you’ll need to provide a page type, and the ID for the page (if necessary). In the response, you’ll get a list of all the regions on that page, and the HTML of the widgets within those regions. This response can be used to inject Widget content into a headless storefront, or in any other situation where you need to flexibly access the content.

Here’s an example query:

# Get the widget HTML for the home page
query getHomePageContentWidgets {
  site {
    content {
      renderedRegionsByPageType(pageType: HOME) {
        regions {
          name
          html
        }
      }
    }
  }
}

Consider this query:

query CategoryByUrl {
  site {
    route(path: "/shop-all") {
      node {
        __typename
        id
        ... on Category {
          name
          products(first: 20, sortBy: DEFAULT) {
            # Use sortBy parameter to use any of the available storefront sorts
            edges {
              node {
                name
                defaultImage {
                  url(width: 360)
                }
              }
            }
          }
        }
      }
    }
  }
}

mutation Login($email: String!, $pass: String!) {
  login(email: $email, password: $pass) {
    result
    customer {
      entityId
      firstName
      lastName
      email
      storeCredit {
        value
        currencyCode
      }
      attributes {
        attribute(entityId: 123) {
          name
          value
        }
      }
    }
  }
}