GraphQL Storefront API Example Queries
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 its usage and capabilities, see GraphQL Storefront API overview.
Configuring the request
To get started, you need a BigCommerce store and a Storefront API token. For more information, see the Authenticating requests to the GraphQL Storefront API or the General authentication article.
For more information on formatting the request payload, see the query example section of the GraphQL Storefront API overview.
To use this API from a coupled storefront, use the following HTTP configuration:
Example query: Same-origin GraphQL Storefront HTTP configuration
fetch('/graphql', {
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + {{storefrontToken}}
},
body: JSON.stringify({
query: gqlQueryString
})
})
.then(response => response.json())
.then(result => console.log(result))
.catch(error => console.error(error));
To use this API server-to-server, use the following HTTP configuration:
Server-to-server GraphQL Storefront HTTP configuration
POST https://{{storeDomain}}/graphql
Authorization: Bearer {{storefrontOrCustomerImpersonationToken}}
X-BC-Customer-ID: 123 # optional once a customer is signed in
Content-Type: application/json
Get a customer's details
Example query: 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
Example query: 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 products within by URL
Example query: Get category and products within 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
}
Look up an object by URL
Example query: Look up an object 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 popular brands
Example query: Get popular brands
query {
site {
popularBrands {
edges {
node {
entityId
count
name
path
}
}
}
}
}
Get a favicon
Example query: Get the storefront's favicon
query Favicon {
site {
settings {
faviconUrl
}
}
}
Did you find what you were looking for?