> 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.

# Lab - Query Practice

Plan: Developer Foundations

Lesson 15 of 28 · 30 min

### In this lab, you will:

* Query for product images at specific resolutions
* Query for customer specific pricing information
* Query for product custom fields
* Query for variant and option information

## Query for Product Images at Specific Resolutions

In this query, we will ask for the first 2 products, their IDs, name, and default image URL at resolutions of 200px, 400px, and 600px. We will also use aliases to be able to tell the difference between image resolutions in the response.

1. In the GraphQL playground, **begin writing the query** with the `root`, `site` field, and `products` field. **Specify next to the products field** that *we only want 2 products* in the response.

```graphql showLineNumbers={false}
query{
  site{
    products(first:2){
      edges{
        node{
      }
    }
  }
}
```

2. **Type** the information we want in the response under `node`: `entityId`, `name`, and default image.

```graphql showLineNumbers={false}
query{
  site{
    products(first:2){
      edges{
        node{
          entityId
          name
          defaultImage{
            url
          }
        }
      }
    }
  }
}
```

3. Specify the resolutions by **typing** `width:200`, `width:400`, and `width:600` next to separate `url` requests.

```graphql showLineNumbers={false}
query{
  site{
    products(first:2){
      edges{
        node{
          entityId
          name
          defaultImage{
            url(width:200)
            url(width:400)
            url(width:600)
          }
        }
      }
    }
  }
}
```

4. **Create** an alias for each image resolution that will specify what each result is in the response.

```graphql showLineNumbers={false}
query{
  site{
    products(first:2){
      edges{
        node{
          entityId
          name
          defaultImage{
            url200px:url(width:200)
            url400px:url(width:400)
            url600px:url(width:600)
          }
        }
      }
    }
  }
}
```

5. **Click the Play button** in the middle of the GraphQL Playground to run the query.
6. **Observe** the response.

## Query for Customer-Specific Pricing Information

In this query, we will ask to see pricing information based on the customer's set price list. Before you begin this exercise, make sure you have a price list set up and assigned to a customer group. Read the article below for more information about Price Lists. Also, make sure you have a registered customer assigned to the same customer group.

[Price Lists](https://support.bigcommerce.com/s/article/Price-Lists)

1. First, let's see what the price of a product is without a logged-in customer. In the GraphQL playground, **begin writing the query** with the `root`, `site` field, and `products` field. **Specify** that we only want to view the *first 3 products* in this query, as well as the `entityId`, `name`, and `price value`.

```graphql showLineNumbers={false}
query{
  site{
    products(first:3){
      edges{
        node{
          entityId
          name
          prices{
            price{
              value
            }
          }
        }
      }
    }
  }
}
```

2. **Click the Play button** in the middle of the GraphQL Playground to run the query.
3. **Observe** the response. Take note of the price of the product without an associated customer.
4. **Log in** as a customer *who is in a customer group associated with a price list*, using the `login` mutation. If you are already logged in as a customer, make sure that the customer is in the correct group to receive your specialty price list prices.

   1. **Go** to Settings > Storefront API Playground.

   2. **Copy** the mutation below and **paste** it into the Storefront API Playground:

      ```graphql showLineNumbers={false}
      mutation Login($email: String!, $pass: String!) {
        login(email: $email, password: $pass) {
          customer {
            entityId
            firstName
            lastName
            customerGroupId
          }
        }
      }
      ```

   3. **Copy and paste** the code below into the Query Variables section to set the variables for the request, replacing `{password}` and `{emailAddress}` with the password and email address of a customer account in the store:

      ```json showLineNumbers={false}
      {"pass":"{password}", "email":"{emailAddress}"}
      ```

   4. **Run** the request and **observe** that the customer is logged in.
5. In the GraphQL Playground, **open a new tab and begin writing the query** with the `root`, and `customer` field. **Specify** that we want the customer's `firstName` and `lastName`.

```graphql showLineNumbers={false}
query{
  customer{
    firstName
    lastName
  }
}
```

6. **Add** the same `site` request information from the previous steps to this query.

```graphql showLineNumbers={false}
query{
  customer{
    firstName
    lastName
  }
  site{
    products(first:3){
      edges{
        node{
          entityId
          name
          prices{
            price{
              value
            }
          }
        }
      }
    }
  }
}
```

7. **Click the Play button** in the middle of the GraphQL Playground to run the query.
8. **Observe** the response. See that the price is different than the first query because the customer is assigned to a specific price list.

## Query for Product Custom Fields

In this query, we will ask for the name and value of a product's custom fields. To successfully complete this step, you will need to have a product with at least one custom field. Read the article below for more information about custom fields.

[Custom Fields](https://support.bigcommerce.com/s/article/Custom-Fields)

1. In the GraphQL playground, **begin writing the query** with the `root`, `site` field, and `product` field. **Specify the product ID** next to the product field and that we want to query for the product's `name` and custom fields.

```graphql showLineNumbers={false}
query{
  site{
    product(entityId:111){
      name
      customFields{
        edges{
          node{
            name
            value
          }
        }
      }
    }
  }
}
```

2. **Click the Play button** in the middle of the GraphQL Playground to run the query.
3. **Observe** the response.

## Query for Variant and Option Information

In this query, we will ask for a product's options and variant information.

1. First, let's ask for a product's available options. In the GraphQL playground, **begin writing the query** with the `root`, `site` field, and `product` field. **Specify the product ID** next to the product field and that we want to query for the `productOptions`, `entityId`, and `displayName`. Be sure to select the ID of a product in your store that has some variants and options built into it.

```graphql showLineNumbers={false}
query{
  site{
    product(entityId:130){
      productOptions{
        edges{
          node{
            entityId
            displayName
          }
        }
      }
    }
  }
}
```

2. **Click the Play button** in the middle of the GraphQL Playground to run the query.
3. **Observe** the response.
4. Next, let's add variant details to this query. **Add** the `variants` field and specify that we want to see the variant `entityId`, `sku`, and `price`.

```graphql showLineNumbers={false}
query{
  site{
    product(entityId:130){
      productOptions{
        edges{
          node{
            entityId
            displayName
          }
        }
      }
      variants{
        edges{
          node{
            entityId
            sku
            prices{
              price{
                value
              }
            }
          }
        }
      }
    }
  }
}
```

5. **Click the Play button** in the middle of the GraphQL Playground to run the query.
6. **Observe** the response.