Lab - Query Practice

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.

query{
  site{
    products(first:2){
      edges{
        node{
      }
    }
  }
}

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

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.

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.

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.

Before you begin this exercise, make sure you have a price list set up and assigned to a customer group. Also, make sure you have a registered customer assigned to the same customer group.

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.

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. Use the login mutation to log in as a customer who is in a customer group associated with a price list.

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

query{
  customer{
    firstName
    lastName
  }
}

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

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

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.

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.

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.

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.