GraphQL Storefront API Example Queries
On this Page
- Get a Customer’s Details
- Get First Three Levels of Category Tree
- Get Category and Children by URL
- Get Multiple Objects by URL
- Get Product’s Images at Different Resolutions
- Get A Single Product
- Get Variant Details as a Product Object
- Get Product Option Details by Product ID
- Get Refined Product Object for Given Options
- Get Product Swatch Option Values
Below are example GraphQL queries for use with the BigCommerce GraphQL Storefront API. The purpose of these examples is to assist developers in getting familiar with the API. For a general overview of it’s usage and capabilities, see GraphQL Storefront API Overview.
Get a Customer’s Details
query CustomerAttributes {
customer {
firstName
lastName
email
entityId
customerGroupId
attributeCount
attributes {
shirtSize: attribute(entityId:123) {
entityId
value
}
favoriteColor: attribute(entityId:456) {
entityId
value
}
}
}
}
Get First Three Levels of Category Tree
query CategoryTree3LevelsDeep {
site {
categoryTree {
...CategoryFields
children {
...CategoryFields
children {
...CategoryFields
}
}
}
}
}
fragment CategoryFields on CategoryTreeItem {
name
path
entityId
}
Get Category and Children by URL
query CategoryByUrl {
site {
route(path: "/shop-all/") {
node {
id
... on Category {
name
entityId
description
products {
edges {
node {
name
defaultImage {
url(width: 1200)
}
brand {
name
defaultImage {
url(width: 200)
}
}
prices {
price {
...PriceFields
}
priceRange {
min {
...PriceFields
}
max {
...PriceFields
}
}
}
}
}
}
}
}
}
}
}
fragment PriceFields on Money {
value
currencyCode
}
Get Multiple Objects by URL
query LookUpUrl {
site {
route(path: "/shop-all/") {
node {
__typename
id
... on Category {
name
description
}
... on Brand {
name
defaultImage {
url(width: 200)
}
}
... on Product {
name
description
images {
edges {
node {
url(width: 500, height: 500)
}
}
}
brand {
name
}
}
}
}
}
}
Get Product’s Images at Different Resolutions
query SrcsetImages {
site {
product(entityId: 123) {
images {
edges {
node {
url320wide: url(width: 320)
url640wide: url(width: 640)
url960wide: url(width: 960)
url1280wide: url(width: 1280)
}
}
}
}
}
}
Get A Single Product
query SingleProduct {
site {
products (entityIds: [4917]) {
edges {
node {
id
entityId
name
prices {
price {
value
currencyCode
}
}
}
}
}
}
}
Get Variant Details as a Product Object
query VariantById {
site {
product(variantEntityId: 27098) {
name
sku
defaultImage {
url(width: 500, height: 500)
}
prices {
price {
...PriceFields
}
salePrice {
...PriceFields
}
retailPrice {
...PriceFields
}
}
width {
...DimensionFields
}
height {
...DimensionFields
}
depth {
...DimensionFields
}
}
}
}
fragment PriceFields on Money {
value
currencyCode
}
fragment DimensionFields on Measurement {
value
unit
}
This query returns variant information appropriately overlaid on the Product object. For example, if the variant has a different image, dimensions, SKU, or price, that will be automatically returned – this allows for directly merchandising particular variants.
Get Product Option Details by Product ID
query SeveralProductsByID {
site {
products(entityIds: [1, 2, 3]) {
edges {
node {
name
options {
edges {
node {
entityId
displayName
isRequired
values {
edges {
node {
entityId
label
}
}
}
}
}
}
}
}
}
}
}
Get Refined Product Object for Given Options
query ProductsWithOptionSelections {
site {
product123: product(
entityId: 123
optionValueIds: [
{ optionEntityId: 4, valueEntityId: 543 }
{ optionEntityId: 5, valueEntityId: 443 }
]
) {
...ProductFields
}
product234: product(
entityId: 234
optionValueIds: [
{ optionEntityId: 8, valueEntityId: 768 }
{ optionEntityId: 13, valueEntityId: 883 }
]
) {
...ProductFields
}
}
}
fragment ProductFields on Product {
name
defaultImage {
url(width: 1000)
}
sku
availability
}
Get Product Swatch Option Values
query {
site {
products (first: 3) {
pageInfo {
startCursor
endCursor
}
edges {
cursor
node {
entityId
name
productOptions {
edges {
node {
entityId
displayName
... on MultipleChoiceOption {
values {
edges {
node {
... on SwatchOptionValue {
label
hexColors
}
}
}
}
}
}
}
}
}
}
}
}
}