products with no image

[RodrigoPrior]

Hi,

First...thanks for the plugin development and all the effort from you @pasdo501 and all the team (and originally @marcaaron).

I'll try to explain it..let's see if I can be clear :)

When you query wc product, sometimes you don't have a base product image and when that happen graphql has a behavior to not show the result instead of return null. This seems to be a problem related in other plugins, gatsby and graphql itself: https://github.com/gatsbyjs/gatsby/issues/20439

Here is an example of reproduction the problem. If you try to run this query within a wc that has some products with no images.

{
  allWcProducts(sort: {fields: [images___src]}) {
    edges {
      node {
        wordpress_id
        images {
          src
        }
        name
      }
    }
  }
}

The resulting data would be (redacted):

...
{
   "node": {
     "wordpress_id": 40361,
     "images": [],
     "name": "Product name 1 without image"
   }
 },
 {
   "node": {
     "wordpress_id": 12180,
     "images": [
       {
         "src": "<domain>/wp-content/uploads/2020/02/product-2.jpg"
       }
     ],
     "name": "Product name 2 with image"
   }
 },
 ...

The fact that "images" has a different behaviour for the field "src" cause errors when you try to use this field, resulting in rendering error and build breaks sometimes.

It should not be expected to "src: null" instead of no filed at all?

How are you dealing with this?

[pasdo501]

Hi there,

Yeah that's what's returned by the woocommerce API - either an array of image objects with src etc or just an empty array. I've always dealt with it by just mapping over the images field - if it contains nothing it'd just get ignored. I suppose one way around it could be to add a configurable default image src (like the WooCommerce placeholder image) and add that as src if blank at build time, or just set src as null ... that's off the top of my head though and may cause other issues since the images usually also have IDs etc.

[RodrigoPrior]

Thats what I'm doing right now...dealing with it at the jsx/template level and at the wp itself...I thought that i was missing something.