Lab - Building Queries

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

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.

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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

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

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.

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
• Pagination
• Pagination (GraphQL)