Shopify StoreFront API GraphQl：如何获取特定产品数据？

Question

注意：我是GraphQl的新手。

挑战：我使用Shopify Storefront API来创建我们所有产品的Selectbox。当用户在此Selectbox中选择产品时，应在页面上显示其Metafields。

我设法创建了Selectbox。但是，当在Selectbox中进行选择时，如何显示特定于产品的数据？请参阅当前代码：

function apiCall(productQuery) { 
    return fetch('https://store//api/2022-04/graphql.json', 
        { 
            method: 'POST', 
            headers: { 
                'Content-Type': 'application/graphql', 
                'X-Shopify-Storefront-Access-Token': "xxx" 
            }, 
            "body": productQuery 
        }
    )
    .then(
        response => response.json()
    ); 
}

function getProducts() { 
    const productQuery = `{ products(first: 250) { edges { node { id handle title } } } }`; 
    return apiCall(productQuery); 
}

$(document).ready(function() { 
    const product_selector_container = $('.product_selector_container'); 
    getProducts().then(response => { 
        product_selector_container.prepend("<select name='product_compatibility_selector' id='product_compatibility_selector'></select>"); 
        const productSelect = $('#product_compatibility_selector');
        const productSelectResult = $("#product_compatibility_result");
        response.data.products.edges.forEach(product => { 
            const optionValues = `<option value="${product.node.handle}">${product.node.title}<option>`; 
            productSelect.append(optionValues); 
        }); 
        
        $("#product_compatibility_selector").on('change', function() {
            var selected = $(this).find('option:selected').text();
            var selectedVal = $(this).find('option').val();
            $(".chosen_product_title").text(selected);
            response.data.products.edges.forEach(product => { 
                // HOW DO I REFERENCE THE CURRENT CHOSEN PRODUCT TO OUTPUT VARIOUS NODES?
                const compatibility_result = `${product.node.title}`;
                productSelectResult.append(compatibility_result);
            });
        });
    });  
}); 

Answer 1

现在，您已经拥有所选产品的句柄来检索该产品的所有元场，您需要使用“查询”参数，类似的内容

{
  products(first: 1, query:"handle:your-handle"){
    edges{
      node{
        metafields(first:10){
          edges{
            node{
              value
              key
            }
          }
        }

      }
    }
  }
}

，或者

{
  product(handle:"your_handle"){
    title
    metafield(key:"your_key", namespace:"your_space"){
      value
    }

  }
}

如果您想参数化句柄，则可能需要在其中引入变量。您的查询，如这样

query($handle:String){
  product(handle:$handle){
    title
    metafield(key:"x",namespace:"y"){
      id
      value
    }

  }
}

，而变量对象如

{"handle":"your-handle"}

请求中所示，而不是仅发送查询您发送的对象，例如

{"query" : your-query, "variables" : variable-object}