Collections appear as empty objects in elevetyComputed

[stuffnting]

The issue

I am trying to access collections in an 11tydata.js directory data file, which sets eleventyComputed.

When I access data from a function which generates the value for an eleventyComputed property, collections appears twice as an empty object.

Note, there is only one template file in the directory that contains the 11tydata.js file.

The following logs two empty objects:

module.exports = () => {
  return {
    eleventyComputed: {
      collectionThing: (data) => {
        console.log(data.collections);
      },
    },
  };
};

I tried an asyc function, and it logs an empty object, followed by an object containing the collections:

module.exports = () => {
  return {
    eleventyComputed: {
      collectionThing: async (data) => {
        const collections = await data.collections;
        console.log(collections);
      },
    },
  };
};

Why I think the first code example should work

First, in the documentation, under Order of Operations, it states:

6. Collections are generated in the correct order, per the dependency graph.

7. Additional Data Cascade operations are applied:
   A separate dependency graph is generated to populate Computed Data, permalink, page.url, and page.outputPath in the correct order.

This seems to say that the collections are sorted out before Computed Data is processed.

Second, there is an example from a working website here, where collections are accessed without an async function:

module.exports = {
	parent: 'brewery',
	layout: 'brewery.njk',
	tags: [
		'brewery'
	],
	eleventyComputed: {
		//...
		beers: (data) =>  data.collections.beer.filter(a => a.data.breweries.includes(data.permalink))
			.sort((a, b) => parseInt(a.data.number) + parseInt(b.data.number)),
		// ...
	}
}

Questions

1. When not using an async function, why does data.collections log as empty?
2. When using the async function, why is the first data.collections empty, but the second one populated?
3. In both code examples, data.collections is logged twice, why?

[pdehaan]

I'm not sure of the technical details of why eleventyComputed always seems to be a two-pass system, but I know I've seen the behavior in the past and can reproduce it when I clone your repo locally.
Your site seems to be working currently (I'm guessing since on the first pass collections.beer seems to be an empty array, but in other cases front matter values may be undefined on the first pass, so I've had to explicitly check if an expected value/key is set and return early so it only checks your code on the second pass. 🤷

Not sure I'm reproducing the behaviors you're explaining though (re: sync and async).

    beers: (data) => {
      // if (Object.keys(data).length === 0) console.log({ data });
      console.log(JSON.stringify({
          beers: data.collections.beer.length,
          keys: Object.keys(data).sort(),
        }));
      return data.collections.beer
        .filter((a) => a.data.breweries.includes(data.permalink))
        .sort((a, b) => parseInt(a.data.number) + parseInt(b.data.number));
    },

This will log something like this locally:

…
{"beers":0,"keys":[]}
{"beers":0,"keys":[]}
{"beers":828,"keys":["aliases","beers","collections","eleventy","eleventyComputed","facebook","imagePath","instagram","layout","location","meta","page","parent","permalink","pkg","seoTitle","socialMediaPhoto","stats","style","tags","title","twitter","untappd","website"]}
…

But that seems to be the same behavior as when I slap an async on that method:

    beers: async (data) => {
      // if (Object.keys(data).length === 0) console.log({ data });
      console.log(JSON.stringify({
          beers: data.collections.beer.length,
          keys: Object.keys(data).sort(),
        }));

[stuffnting]

Thank you for your quick response.

I think there is some confusion, I'm sorry if the question was not clear.

The beer site is not my site. It is a site I came across, where the collections were accessible without using async in an 11ty.js data file.

I am in fact trying this out on a test project on my computer.

What I am asking is: why, when I try to access the collections in an 11ty.js directory data file, can I only do it using async, whereas, the beer site seems to do it without using async?

When I try it without async, I only every get empty objects. With async I get an empty object an first, but then get a populated object.

I can't find anything in the documentation that uses collections in an 11ty.js data file. Is there a recommended way of doing it?

I feel there is something in the process that I am doing incorrectly, and misunderstanding.

Thank you for your help.

[pdehaan]

I'm not sure. I don't think I've seen a case where I've needed to use async [but a lot of times it can be very specific to a project and workflows], so without seeing your code/project, I'm not sure how to reproduce locally.

[stuffnting]

I have put the simplest site possible in a repo here.

The eleventyComputed function is in /blog/blog/11tydata.js.

When I run start I get the same results as before: two empty objects without async; and one empty, followed by a populated object when the function is converted to async.

I would be interested to know if you get the same results.

Thanks again for your help.

[pdehaan]

Well, well, that certainly was interesting:
Here's my directory data file:

module.exports = {
  layout: "default.njk",
  tags: ["posts"],
  eleventyComputed: {
    title(data) {
      // if (data.collections.all.length === 0) return;
      console.log("colls:", Object.keys(data.collections));
      // console.log("posts:", data.collections.posts.length);
      if (data.title) {
        return String(data.title).toUpperCase();
      }
      return "My site rules";
    },
    foo(data) {
      return "bar";
    }
  },
};

When I have this:

      // if (data.collections.all.length === 0) return;
      console.log("colls:", Object.keys(data.collections));
      // console.log("posts:", data.collections.posts.length);

It logs this:

colls: []
colls: []

But if I reference the collections.posts in that function, then it seems to resolve the collections as expected:

      // if (data.collections.all.length === 0) return;
      console.log("colls:", Object.keys(data.collections));
      console.log("posts:", data.collections.posts.length);

Output:

colls: []
posts: 0
colls: [ 'all', 'posts', 'bananas' ]
posts: 1

So maybe it's just a weak reference to the collections until they're needed. 🤷

[stuffnting]

Blimey, that is odd!

It seems that adding a reference to a specific collection, has the same effect as making the function async.

I expanded on your code a bit:

module.exports = {
  tags: ["posts"],
  eleventyComputed: {
    title(data) {
      // Part 0
      console.log("~~~~~~~~~~~~~~~~~~  Start Part 0  ~~~~~~~~~~~~~~~~~~~~~");
      console.log("Log 0a: ");
      console.dir(data.collections, { depth: 1 });
      console.log("Log 0b: ");
      console.dir(data.collections.posts, { depth: 0 });
      console.log("~~~~~~~~~~~~~~~~~~  End Part 0  ~~~~~~~~~~~~~~~~~~~~~");

      // Part 1
      console.log("-------------------   Start Part 1  ---------------------");
      const getStuff = data.collections.posts.map((item) => {
        const title = `${item.data.title}, ${item.date}`;
        console.log("Log 1: ", title);
        return title;
      });
      console.log("-------------------   End Part 1  ----------------------");
      return getStuff.join(" | ");
    },
  },
};

Which returns:

~~~~~~~~~~~~~~~~~~  Start Part 0  ~~~~~~~~~~~~~~~~~~~~~
Log 0a: 
{}
Log 0b: 
[]
~~~~~~~~~~~~~~~~~~  End Part 0  ~~~~~~~~~~~~~~~~~~~~~
-------------------   Start Part 1  ---------------------
-------------------   End Part 1  ----------------------
~~~~~~~~~~~~~~~~~~  Start Part 0  ~~~~~~~~~~~~~~~~~~~~~
Log 0a: 
{ all: [ [Object], [Object] ], posts: [ [Object] ] }
Log 0b: 
[ [Object] ]
~~~~~~~~~~~~~~~~~~  End Part 0  ~~~~~~~~~~~~~~~~~~~~~
-------------------   Start Part 1  ---------------------
Log 1:  Post number 1, Mon Aug 07 2023 20:16:11 GMT+0100 (British Summer Time)
-------------------   End Part 1  ----------------------

First pass

• Part 0
  • Log 0a: data.collections is an empty object, not surprising (not any more).
  • Log 0b: data.collections.posts and empty array, surprising. Expected undefined, considering data.collections is empty.
• Part 1
• Log 1: data.collections.posts.map missing. Because of 0b, not surprising. Better than getting 'Can't read properties of undefined'

Second pass

• Part 0
  • Log 0a: data.collections is a populated object, surprising. Previously, when not using an async function, both passes produced an empty object.
  • Log 0b: data.collections.posts a populated array, not surprising, since data.collections is now populated.
• Part 1
• Log 1: data.collections.posts.map the string that is expected once data.collections.posts is populated.

I wonder whether it is worth raising an 'issue', since it is very confusing to get nothing from console.log(data.collections), but are able to use data.collections.posts at the same point in the code.