> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Working with Products

This section demonstrates how to use BigCommerce's GraphQL Storefront API and REST Products API to query and manage product data for headless storefronts.

## Retrieving product data

BigCommerce's [GraphQL Storefront API](/developer/docs/storefront/guides/graphql-storefront-api) makes it possible to query storefront data from a remote site. By leveraging the power of GraphQL, you can access product information for any product from any page.

The following example demonstrates how to fetch product data using the GraphQL Storefront API. It relies on the [GraphQL Cursor Connections Specification model](https://relay.dev/graphql/connections.htm) to handle pagination.

**Product Listing Page query example**

```graphql showLineNumbers={false}
function getProductInfo(params) {
    const storeUrl = new URL(params.store_url);

    // Use the store's canonical URL which should always resolve
    const graphQLUrl = `${storeUrl.origin}/graphql`;

    // Set up GraphQL query
    const graphQLQuery = `
        query productListing {
            site {
                products {
                    pageInfo {
                        startCursor
                        endCursor
                        }
                    edges {
                        cursor
                        node {
                            id
                            entityId
                            name
                            sku
                            description
                            prices {
                                price {
                                    value
                                    currencyCode
                                }
                            }
                        }
                    }
                }
            }
        }`

    // Fetch data from the GraphQL Storefront API
    return fetch(graphQLUrl, {
        method: 'POST',
        credentials: 'include',
        mode: 'cors',
        headers: { 
            'Content-Type': 'application/json', 
            'Authorization': `Bearer ${params.token}`},
            body: JSON.stringify({ query: graphQLQuery}),
        })
        .then(res => res.json())
        .then(res => res.data);
    }

    // Set up default params
    let params = {
        store_url: null,
        token: null
    };
```

Following the same API fetching logic, you can retrieve data for a single product.

**Product Details Page query example**

```graphql showLineNumbers={false}
query SingleProduct {
  site {
    product (entityId: ${params.id}) {
      id
      entityId
      name
      sku
      description
      prices {
        price {
          value
          currencyCode
        }
      }
    }
  }
}
```

> **Note**
>
> We recommend using the GraphQL Storefront API to query the product data. It lets you specify the information needed from the server and retrieve multiple resources in a single call. For example, using the GraphQL Storefront API, you can fetch product pricing, options, and variations in a single request, improving performance and minimizing the need for subsequent API calls.

## Managing products

The GraphQL Storefront API provides read-only data and cannot be used to manipulate products at this time. You will need to use BigCommerce's REST [Products API](/developer/api-reference/rest/admin/catalog/products) to manage products data.

To update products in batches, send a `PUT` request to the [Update Products (Batch)](/developer/api-reference/rest/admin/catalog/products/update-products) endpoint.

**`Example request: Update products`**

```http title="Example request: Update products" showLineNumbers={false}
PUT https://api.bigcommerce.com/stores/{store_hash}/v3/catalog/products
Accept: application/json
Content-Type: application/json
X-Auth-Token: {{ACCESS_TOKEN}}

[
  {
    "id": 77,
    "name": "Fog Linen Chambray Towel - Beige Stripe",
    "inventory_level": 11,
    "price": 55.97
  },
  {
    "id": 80,
    "name": "Orbit Terrarium - Large",
    "inventory_level": 15,
    "price": 100.99
  }
]
```

To update a single product, send a `PUT` request to the [Update a Product](/developer/api-reference/rest/admin/catalog/products/update-product) endpoint.

**`Example request: Update a product`**

```http title="Example request: Update a product" showLineNumbers={false}
PUT https://api.bigcommerce.com/stores/{store_hash}/v3/catalog/products/{product_id}
Accept: application/json
Content-Type: application/json
X-Auth-Token: {{ACCESS_TOKEN}}

{
    "name": "Fog Linen Chambray Towel - Beige Stripe",
    "inventory_level": 10,
    "price": 55.97
}
```

### Cache the catalog

It is best practice to cache product details in a database to improve performance and increase operational efficiency. Caching product information will allow you to implement search functionality and control the information displayed to the customers.

## Next step

* [Learn how to create a cart](/developer/docs/storefront/headless/cart-and-checkout/carts)

## Resources

* [Catalog API Overview](/developer/docs/admin/catalog-and-inventory)