Graphql functionality missing documentation

[adotterer]

Our client needs a custom widget that they are able to choose their own products and I'm trying to get the product details via graphql. How do I pass in the users selected productIds as queryVariables? Right now my bandaid fix is with first: 50

I'm doing my best to copy this: https://github.com/bigcommerce/widget-builder/tree/master/src/services/__fixtures__

Code below:

Graphql:

query ProductList($productIds: [Int!]) {
  site {
    products(first: 50, entityIds: $productIds) {
      edges {
        node {
          entityId
          plainTextDescription
          name
          entityId
          addToCartUrl
          addToWishlistUrl
          path
          sku
          prices {
            price {
              currencyCode
              value
            }
            priceRange {
              min {
                value
                currencyCode
              }
              max {
                value
                currencyCode
              }
            }
          }
          reviewSummary {
            summationOfRatings
            numberOfReviews
          }
          defaultImage {
            url(width: 1500, height: 1500)
          }
          customFields(names: ["New"]) {
            edges {
              node {
                value
              }
            }
          }
          productOptions(first: 5) {
            edges {
              node {
                __typename
                ... on MultipleChoiceOption {
                  values {
                    edges {
                      node {
                        entityId
                        label
                        isDefault
                      }
                    }
                  }
                }
                entityId
                displayName
              }
            }
          }
        }
      }
    }
  }
}

schema.json:

[
  {
    "type": "tab",
    "label": "Design",
    "sections": [
      {
        "label": "Title",
        "settings": [
          {
            "type": "input",
            "id": "title",
            "label": "Title",
            "default": "Layflat Photo Albums"
          },
          {
            "type": "input",
            "id": "productBlockDescription",
            "label": "Description text",
            "default": "Our most premium offering, these books have the most rigid pages. Offered in 5 sizes - from bigger than your face to hand held."
          }
        ]
      }
    ]
  },
  {
    "type": "array",
    "label": "Our Favorites",
    "id": "favorites",
    "thumbnail": {
      "type": "image",
      "valueKey": "product_img.src"
    },
    "defaultCount": 8,
    "entryLabel": "Product",
    "schema": [
      {
        "type": "hidden",
        "settings": [
          {
            "type": "graphQl",
            "id": "graphQueries",
            "typeMeta": {
              "mappings": {
                "productId": {
                  "reads": "productId",
                  "type": "Int!"
                }
              }
            }
          }
        ]
      },
      {
        "type": "tab",
        "label": "Product Settings",
        "sections": [
          {
            "settings": [
              {
                "type": "productId",
                "label": "Product",
                "id": "productId",
                "default": "137",
                "typeMeta": {
                  "placeholder": "Search by name or SKU"
                }
              },
              {
                "type": "productImage",
                "id": "product_img",
                "label": "Product Image",
                "default": {
                  "src": "img.jpeg"
                },
                "typeMeta": {
                  "reference": "productId"
                }
              }
            ]
          }
        ]
      }
    ]
  }
]

html:

<ul id="product-card-grid-{{_.id}}">
    {{#each favorites as |product|}}
    {{#each ../_.data.site.products.edges as
    |productResource|}}
    {{#if productResource.node.entityId "=="
    product.productId}}
    <li class="product-card card-body">
      <a href="{{productResource.node.path}}">
        <img src="{{product.product_img.src}}" />
        <h3 class="card-title">{{productResource.node.name}}</h3>
        <p class="card-desc">{{productResource.node.plainTextDescription}}</p>
        <div class="row">
          <span class="fav-price-label price price--withoutTax">
            {{#if productResource.node.prices.priceRange.min.value "!="
            productResource.node.prices.priceRange.max.value}} from {{/if}}
            ${{productResource.node.prices.priceRange.min.value}}</span
          >
          <span
            class="color-swatches"
            data-swatch-pid="{{product.productId}}"
          ></span>
        </div>
      </a>
    </li>
    {{/if}} {{/each}} {{/each}}
  </ul>

[KyleSmith0905]

I have a feeling this is a bug. I could not get this working either.

Just like you, I created a minimum reproducible example However, all I did was copy the __fixtures__ example without editing it. I could select products, but the products would not be queried.

Did you find any fix?