> 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 - Building Queries

Plan: Developer Foundations

Lesson 13 of 28 · 30 min

## **In this lab, you will:**

* Query for customer-specific information
* Use an Alias to rename a field in a query
* Use a fragment to query for pricing information
* Use cursors to find page 2 of a list of products

### Follow these steps:

1. In the GraphQL Playground, **type** the root (`query`) and the first field under the root (`customer`).

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

  }
}
```

2. **Type** **option+space bar (Mac OS) or control+space bar (Windows OS)** to view the fields you can query under `customer`. We will query for `firstName`, `lastName`, and `email`.

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

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

> **Info**
>
> If you successfully used the login mutation in the previous labs, you should see customer-specific information returned. If you are not currently in a registered customer section or are querying anonymously, you will get a response of null.

In this next query, we will create an alias in a query for product details.

1. In the GraphQL Playground, **type** the root (`query`) and the first field under the root (`site`).

```graphql showLineNumbers={false}
query{
  site{

  }
}
```

2. **Type** **option+space bar (Mac OS) or control+space bar (Windows OS)** to view the fields you can query under `site`. We will query for `products` and include `edges` and `nodes` so that we can continue to define the product information we want to query in the next step.

```graphql showLineNumbers={false}
query{
  site{
    products{
      edges{
        node{
        }
      }
    }
  }
}
```

3. **Type** **option+space bar (Mac OS) or control+space bar (Windows OS)** to view the fields you can query under `products`. We will query for `entityId`, `name`, and `description`.

```graphql showLineNumbers={false}
query{
  site{
    products{
      edges{
        node{
          entityId
          name
          description
        }
      }
    }
  }
}
```

4. We want to see "name" as "title" in the response, so we will have to create an alias. **Type** `title:` before "name" in the query to create an alias.

```graphql showLineNumbers={false}
query{
  site{
    products{
      edges{
        node{
          entityId
          title:name
          description
        }
      }
    }
  }
}
```

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

In this query, we will ask for the price and `salesPrice` for a specific product. To avoid repetitive text in the query, let's create two fragments called `PriceFields` and `MoneyFields`.

1. In the GraphQL Playground, **type** the root (`query`) and the first field under the root (`site`).

```graphql showLineNumbers={false}
query{
  site{

  }
}
```

2. Under site, **type** `product`. We want to query for a specific product, so **type** the *product ID* next to the product field.

> **Info**
>
> The examples below use a product ID of "81." Insert the product ID for a product on your store in place of "81".

```graphql showLineNumbers={false}
query{
  site{
    product(entityId:81){
  }
}
```

3. We want to query for pricing information. **Type** **option+space bar (Mac OS) or control+space bar (Windows OS)** to view the fields you can query under `product`. We will query for `prices`.

```graphql showLineNumbers={false}
query{
  site{
    product(entityId:81){
      prices{
    }
  }
}
```

4. **Type** **option+space bar (Mac OS) or control+space bar (Windows OS)** to view the fields you can query under `prices`. You will see that both price and `salesPrice` are possible fields. This is where the fragment name will belong. Type `...PriceFields` under `prices`.

```graphql showLineNumbers={false}
query{
  site{
    product(entityId:81){
      prices{
        ...PriceFields
      }
    }
  }
}
```

5. Now we need to specify what `...PriceFields` means. At the end of the query, **start a new line and create** a fragment with the **name** `PriceFields` and the **type** `Prices`. Then type the fields for which the fragment applies (`price` and `salePrice`). In this example, we are creating another fragment called `MoneyFields` which will be defined in the next step.

```graphql showLineNumbers={false}
query{
  site{
    product(entityId:81){
      prices{
        ...PriceFields
      }
    }
  }
}
fragment PriceFields on Prices{
  price{
    ...MoneyFields
  }
  salePrice{
    ...MoneyFields
  }
}
```

6. At the end of the `PriceFields` fragment, **start a new line and create** a fragment with the **name** `MoneyFields` and the **type** `Money`. The fields for `MoneyFields` will include `value` and `currencyCode`.

```graphql showLineNumbers={false}
query{
  site{
    product(entityId:81){
      prices{
        ...PriceFields
      }
    }
  }
}
fragment PriceFields on Prices{
  price{
    ...MoneyFields
  }
  salePrice{
    ...MoneyFields
  }
}
fragment MoneyFields on Money{
  value
  currencyCode
}
```

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

In this query, we will query for the first 2 products, plus their IDs, and names. Then we will use pagination to view the next 2 products in the catalog after the previous results.

1. In the GraphQL Playground, **type** the root (`query`), query name (`paginateProducts`), and the first field under the root (`site`).

```graphql showLineNumbers={false}
query paginateProducts{
  site{

  }
}
```

2. **Type** `products` in the next field and include *how many products* we want to see in the response. Then **include** the page information, cusors, edges, and nodes (`entityId` and `name`).

```graphql showLineNumbers={false}
query paginateProducts{
  site{
    products(first:2){
      pageInfo{
        startCursor
        endCursor
      }
      edges{
        cursor
        node{
          entityId
          name
        }
      }
    }
  }
}
```

3. **Click the Play button** in the middle of the GraphQL Playground to run the query.
4. **Observe** the response.
5. **Copy** the end cursor value.
6. Next, we want to see the 2 products that come after the products we just queried. **Paste** the `cursor` value from the previous step next to `first:2`.

```graphql showLineNumbers={false}
query paginateProducts{
  site{
    products(first:2, after:"YXJyYXljb25uZWN0aW9uOjE="){
      pageInfo{
        startCursor
        endCursor
      }
      edges{
        cursor
        node{
          entityId
          name
        }
      }
    }
  }
}
```

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

## Resources

* [GraphQL Storefront API Example Queries](/developer/docs/storefront/guides/graphql-storefront-api/products-and-catalog)
* [Pagination](/developer/docs/storefront/guides/graphql-storefront-api#pagination)
* [Pagination (GraphQL)](https://graphql.org/learn/pagination/)