How to Display Magento Related Products on Venia/ScandiPWA Theme?

In this article, we describe the GraphQl queries for getting the necessary auto-related rule data for Progressive Web App (PWA). To implement the GraphQL resolver you need to install Magento 2 Automatic Related Products Extra. 

Besides, you can easily check those queries with the ChromeiQL extension for Chrome Browser. 

Related Product Rule GraphQL Request

With this query you will get all related products using rule ID (products that fall under the rule conditions).

Query:

query mfAutoRelatedProducts ($ruleId: Int $productId: Int $categoryId: Int $pageSize: Int $currentPage: Int) {
    mfAutoRelatedProducts(
      ruleId: $ruleId
      productId: $productId
      categoryId: $categoryId
      pageSize: $pageSize
      currentPage: $currentPage
 ){
     total_count
   items{
      products{
        id
        name
        sku
      }
     category_ids{
       category_id
     }
          customer_group_ids{
       group_id
     }
          store_ids{
       store_id
     }
     id
    name
    description
    status
    priority
    block_position
    merge_type
    from_one_category_only
    only_with_higher_price
    only_with_lower_price
    conditions_serialized
    actions_serialized
    block_title
    sort_by
    display_add_to_cart
    number_of_products
    display_out_of_stock
    who_bought_this_also_bought
    who_viewed_this_also_viewed
    start_date
    finish_date
    same_as_conditions_serialized
    click_count
    crt_rate
    apply_same_as_condition
     
   }
 }
}

Variables:

{
"ruleId": 1,
"pageSize": 5,
"currentPage": 1
}

Result:

As a result, you will receive data about the first 5 products on the first page.

Product and Category GraphQL Request

With this query you will be able to use product and category to see which rules they fall under. 

Query:

query mfAutoRelatedProducts ($ruleId: Int $pageSize: Int $currentPage: Int) {
 mfAutoRelatedProducts(
      ruleId: $ruleId
      pageSize: $pageSize
      currentPage: $currentPage
 ){
     total_count
   items{
      products{
        id
        name
        sku
      }
     category_ids{
       category_id
     }
          customer_group_ids{
       group_id
     }
          store_ids{
       store_id
     }
     id
    name
    description
    status
    priority
    block_position
    merge_type
    from_one_category_only
    only_with_higher_price
    only_with_lower_price
    conditions_serialized
    actions_serialized
    block_title
    sort_by
    display_add_to_cart
    number_of_products
    display_out_of_stock
    who_bought_this_also_bought
    who_viewed_this_also_viewed
    start_date
    finish_date
    same_as_conditions_serialized
    click_count
    crt_rate
    apply_same_as_condition
     
   }
 }
}

Variables:

{
"ruleId": 1,
"productId": 1,
"categoryId": 1,
"pageSize": 5,
"currentPage": 1
}

Result:

As a result, you will receive data about which rules current products and categories fall.