I've a case that's related to circular dependency

[vhbui02]

I have a product detail page that contains a section called "similar type product" that requires pagination.

This is the screenshot of a product detail page from my site which is built using legacy LAMP stack.

Here is a product frontmatter data, bc001.md:

---
id: "x_7y3KZOXWtxfkHJYgrOi" # product id
tags: "Y8NmQEnKD6fIbDgTiaapC" # category id
title: "BC001"
description: "Coiled and pressed bamboo vase"
size: ["D25 x H30 cm"]
date: "2024-11-05"
material: "Spun bamboo"
image: "/images/products/BC001758932.jpg"
imageAlt: "BC001758932.jpg"
trending: false
new: false
slideshow: false
---

Here is my proposed products.11tydata.js:

export default function () {
  return {
    tags: "products",
    // pagination: {
    //   data: "collections.products",
    //   size: 12,
    //   alias: "productList",
    //   generatePageOnEmptyData: true,
    //   before: function (paginationData, fullData) {
    //     return paginationData["products"]
    //       .filter((item) => item.data.id !== fullData.id)
    //       .sort((a, b) => a.data.title.localeCompare(b.data.title));
    //   },
    // },
    layout: "layouts/product.html",
    permalink: "{{ page.filePathStem }}.html",
  };
}

Even though the current product itself shouldn't be inside productList since I'm filtering it, but the Circular Dependency detection happens when the current product is simply being scanned, not actually used.

I had been thinking about changing to AJAX JS but that's way too overkill. What should I do?

[dwkns]

When you say Circular Dependency detection happens, what error are you getting? When does it happen? Is it your before function that is triggering it?

[vhbui02]

1. A PaginationError: Pagination circular reference error.
2. I'm not sure, in the stack trace there wasn't any mentions about which lines inside products.11tydata.js causing the problem. Either data: "collections.products" or the before function causes this:

[11ty] Problem writing Eleventy templates:
[11ty] 1. Error generating template page(s) for ./src/products/bc001.md. (via EleventyMapPagesError)
[11ty] 2. Pagination circular reference (./src/products/bc001.md), data:`collections.products` iterates over both the `products` collection and also supplies pages to that collection. (via PaginationError)
[11ty] 
[11ty] Original error stack trace: PaginationError: Pagination circular reference (./src/products/bc001.md), data:`collections.products` iterates over both the `products` collection and also supplies pages to that collection.
[11ty]     at Pagination.circularReferenceCheck (file:///usr/local/lib/node_modules/@11ty/eleventy/src/Plugins/Pagination.js:53:11)
[11ty]     at Pagination.setData (file:///usr/local/lib/node_modules/@11ty/eleventy/src/Plugins/Pagination.js:77:8)
[11ty]     at new Pagination (file:///usr/local/lib/node_modules/@11ty/eleventy/src/Plugins/Pagination.js:24:8)
[11ty]     at Template.getTemplates (file:///usr/local/lib/node_modules/@11ty/eleventy/src/Template.js:823:18)
[11ty]     at async #initDependencyMapEntry (file:///usr/local/lib/node_modules/@11ty/eleventy/src/TemplateMap.js:192:17)
[11ty]     at async TemplateMap.initDependencyMap (file:///usr/local/lib/node_modules/@11ty/eleventy/src/TemplateMap.js:186:4)
[11ty]     at async TemplateMap.cache (file:///usr/local/lib/node_modules/@11ty/eleventy/src/TemplateMap.js:274:3)
[11ty]     at async TemplateWriter._createTemplateMap (file:///usr/local/lib/node_modules/@11ty/eleventy/src/TemplateWriter.js:352:3)
[11ty]     at async TemplateWriter.generateTemplates (file:///usr/local/lib/node_modules/@11ty/eleventy/src/TemplateWriter.js:382:3)
[11ty]     at async TemplateWriter.write (file:///usr/local/lib/node_modules/@11ty/eleventy/src/TemplateWriter.js:430:38)
[11ty] Benchmark    514ms  15%    44× (Data) `./src/categories/categories.11tydata.js`
[11ty] Benchmark    406ms  12%  1672× (Data) `./src/products/products.11tydata.js`
[11ty] Wrote 0 files in 3.51 seconds (v3.1.2)
[11ty] Eleventy Fatal Error (CLI):
[11ty] 1. Error generating template page(s) for ./src/products/bc001.md. (via EleventyMapPagesError)
[11ty] 2. Pagination circular reference (./src/products/bc001.md), data:`collections.products` iterates over both the `products` collection and also supplies pages to that collection. (via PaginationError)
[11ty] 
[11ty] Original error stack trace: PaginationError: Pagination circular reference (./src/products/bc001.md), data:`collections.products` iterates over both the `products` collection and also supplies pages to that collection.
[11ty]     at Pagination.circularReferenceCheck (file:///usr/local/lib/node_modules/@11ty/eleventy/src/Plugins/Pagination.js:53:11)
[11ty]     at Pagination.setData (file:///usr/local/lib/node_modules/@11ty/eleventy/src/Plugins/Pagination.js:77:8)
[11ty]     at new Pagination (file:///usr/local/lib/node_modules/@11ty/eleventy/src/Plugins/Pagination.js:24:8)
[11ty]     at Template.getTemplates (file:///usr/local/lib/node_modules/@11ty/eleventy/src/Template.js:823:18)
[11ty]     at async #initDependencyMapEntry (file:///usr/local/lib/node_modules/@11ty/eleventy/src/TemplateMap.js:192:17)
[11ty]     at async TemplateMap.initDependencyMap (file:///usr/local/lib/node_modules/@11ty/eleventy/src/TemplateMap.js:186:4)
[11ty]     at async TemplateMap.cache (file:///usr/local/lib/node_modules/@11ty/eleventy/src/TemplateMap.js:274:3)
[11ty]     at async TemplateWriter._createTemplateMap (file:///usr/local/lib/node_modules/@11ty/eleventy/src/TemplateWriter.js:352:3)
[11ty]     at async TemplateWriter.generateTemplates (file:///usr/local/lib/node_modules/@11ty/eleventy/src/TemplateWriter.js:382:3)
[11ty]     at async TemplateWriter.write (file:///usr/local/lib/node_modules/@11ty/eleventy/src/TemplateWriter.js:430:38)

[vhbui02]

Okay, I give up, just point me to the create collections API, I will create a collection myself. Not addCollection() API, its order of execution is unpredictable.

[dwkns]

Not 100% sure what you mean by the order of execution is unpredictable. Can you elaborate?

.addCollection() is definitely the right API to create a new collection. A collections is just an array of objects with information about the current page in the collection. You can sort those objects any way you want to.

The circualr reference comes about because within those objects is .data key which contains the collections which in turn contains the object who's data key you are looking at. You can see this more clearly in this example, which uses a plugin I've been developing in part to better understand how collections and pagination work.

I suspect what you are actually are trying to create is a pagination for each product you have. You can do this by creating a collection for your products, then loop that collection adding a hand crafted pagination array excluding the current product.

It's not exactly what you are trying to achive, but you can see an example of hand crafted pagination here.

All that said, I may have missunderstood what you are trying to do.

[vhbui02]

I suspect what you are actually are trying to create is a pagination for each product you have. You can do this by creating a collection for your products, then loop that collection adding a hand crafted pagination array excluding the current product.

You're right. You can see the image I've posted. But creating a collection for my products using addCollections() API is not going to work for my use case.

Not 100% sure what you mean by the order of execution is unpredictable. Can you elaborate?

.addCollection() is definitely the right API to create a new collection. A collections is just an array of objects with information about the current page in the collection. You can sort those objects any way you want to.

The product collection can be created using Configuration API inside eleventy.config.js as follows:

eleventyConfig.addCollection("products", (collectionsApi) => collectionsApi.getFilteredByGlob("./src/products/*.md"));

The thing is, the 2nd parameter - the callback, is invoked asynchronously and its execution order is unknown. It's not executed before the start of before callback get called because I've check the 2nd argument of before callback function - fullData. This object have collections property. I thought I can access the products in this way, but no, nothing.

I've tried to use:

eleventyImport:
  collections: ["all"]

hoping I can steer the order of execution and make products available. I've got everything (nav, categories, materials, channels) but no products.

// ...
eleventyImport: {
  collections: ["all"]
},
before: function (paginationData, fullData) {
  console.log(Object.keys(fullData.collections)); // 'nav', 'categories', 'materials', 'channels', no `'products'
   return ...
},
// ...

Thanks for your examples but I've developed my own solution. The trick is:

1. learn the data structure of a Collection object. It requires a lot of documentation reading and console log.
2. create an async function that manually read and parse the frontmatter of all of the Markdown product files using fs and path module, then cache it in Global Data File.
3. inside JS Data File, import that function and call it right before return, then inside before() callback function, refer to that data (yes, a side-effect in Functional Programming, but I don't have no other choice).