Arrays in computed front-matter data render "[object Object]"

[ed-ponce]

Problem

I’m trying to loop through a collection of pages (generated by Eleventy’s pagination feature) and access each of its computed front-matter.

Unfortunately, the array just renders a string reading "[object Object][object Object][object Object]" (the sample is repeated 3 times as this array should contain 3 objects).

Expected data:

{
  "images": {
    "nodes": [
      {
        "altText": "Lorem ipsum",
        "src": "https://cdn.shopify.com/s/files/…"
      },
      {
        "altText": "Lorem ipsum",
        "src": "https://cdn.shopify.com/s/files/…"
      },
      {
        "altText": "Lorem ipsum",
        "src": "https://cdn.shopify.com/s/files/…"
      }
    ]
  }
}

---

Context

I’m using Shopify’s Storefront API to fetch, an array of the products in store and their metadata.

• shopify.js shopify.js fetches the data with GraphQL
• products.liquid paginates the data to compose product pages
• index.liquid displays the products in store by looping through collections.products (collection generated by the tags front-matter key)

// shopify.js
const fetch = require("node-fetch");
require("dotenv").config();

module.exports = async () => {

  try {
    const result = await fetch(process.env.SHOPIFY_API_ENDPOINT, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Shopify-Storefront-Access-Token": process.env.SHOPIFY_STOREFRONT_API_TOKEN,
      },
      body: JSON.stringify({
        query: `{
          shop {
            // …
          }
          products(first: 100) {
            edges {
              node {
                // …
                images(first: 100) {
                  nodes {
                    altText
                    src
                  }
                }
                // …
              }
            }
          }
          collections(first: 100) {
            // …
          }
          localization {
            // …
          }
        }`
      }),
    }).then((res) => res.json())

    if (result.errors) {
      console.log({
        errors: result.errors
      })
    } else if (!result || !result.data) {
      console.log({
        result
      })
      return "No results found."
    }

    return {
      shop: result.data.shop,
      products: result.data.products.edges,
      collections: result.data.collections.edges,
      lang: result.data.localization.language
    }

  } catch (error) {
    console.log(error)
  }

};

# products.liquid
tags: "products"
pagination:
  data: "shopify.products"
  alias: "product"
  size: 1
  addAllPagesToCollections: true
eleventyComputed:
  title: "{{ product.node.title }}"
  price: "{{ product.node.priceRange.minVariantPrice.amount }}"
  images: "{{ product.node.images.nodes }}"
permalink: "/{{ page.fileSlug }}/{{ product.node.handle }}/"

<!-- index.liquid -->
{% for product in collections.products %}
  {% for image in product.data.images %}
    <img src="{{ image.src }}" alt="{{ image.altText }}">
  {% endfor %}
{% endfor %}

---

What I know

• The problem shows up when trying to compute an array. title and price keys work as intended.
• I’m guessing there’s a better and leaner way to format the returned data by shopify.js to avoid abusing the eleventyComputed feature.
• I could just access all this data by referencing shopify.foo.bar instead of collections.products, but I relied on the collection so I can reference it in different templates (RSS/Atom feed, archive documenting seasons) rather than just index.liquid.

[pdehaan]

I think the issue is that this will stringify the array into a string of "[object Object]":

eleventyComputed:
  images: "{{ product.node.images.nodes }}"

I'd have to try rebuilding everything from scratch to see if it'd have the same behavior if you used ---js front matter instead, or moved the front matter into an external products.11tydata.js file and tried aliasing the computed images as an array instead of a string.

https://www.11ty.dev/docs/data-computed/

[ed-ponce]

I just tried this:

# products.liquid
---
tags: "products"
pagination:
  data: "shopify.products"
  alias: "product"
  size: 1
  addAllPagesToCollections: true
permalink: "/{{ page.fileSlug }}/{{ product.node.handle }}/"
---

// products.11tydata.js
module.exports = {
  eleventyComputed: {
    title: data => product.node.title,
    id: data => product.node.id,
    images: data => product.images.nodes
  }
}

I was hoping it would work but is unable to read my variables and outputs an error:

[eleventy] [11ty] product is not defined (via ReferenceError)

[eleventy] [11ty] shopify is not defined (via ReferenceError)

[pdehaan]

Maybe try:

module.exports = {
  eleventyComputed: {
    title: data => data.product.node.title,
    id: data => data.product.node.id,
    images: data => data.product.images.nodes
  }
}

[ed-ponce]

Now that worked!