Eleventy: Computed data: can’t access collection data that’s been generated by pagination

[paulrobertlloyd]

Describe the bug
I have a global data file, venues.js, which I use to create pages from using pagination:

---
layout: venue
pagination:
  data: venues
  size: 1
  alias: venue
  addAllPagesToCollections: true
permalink: "venues/{{ venue.id }}/"
tags: venue
eleventyComputed:
  title: "{{ venue.title }}"
---

Using tags, I add these generated pages to a collection called venue.

For my events pages, I want to reference data in collections.venue, namely finding the venue which has the same id as the one in an event’s frontmatter. I tried doing this using computed data:

module.exports = {
  layout: 'event',
  permalink: 'events/{{ page.date | date: "%Y/%m" }}/{{ page.fileSlug }}/',
  tags: ['event'],
  eleventyComputed: {
    venue: data => data.collections.venue.find(venue => {
      return venue.id === data.venue_id;
    })
  }
};

This generates an error: Cannot read property 'find' of undefined. If, however, I query a collection that has not been generated using pagination, then I don’t get this error.

Is this a known limitation of computed data?

[zachleat]

I mean, it is known now!

Also very fixable 👍🏻

[zachleat]

@paulrobertlloyd What version of Eleventy were you using here? Were you using the new 0.11.0 beta 4?

[zachleat]

I believe this was fixed with Beta 4 and wrote a passing test to confirm. Can you retest if you were not updated?

[paulrobertlloyd]

I am using the latest beta, but turns out this is a duplicate of #1137. If I write the following, I can get the output I expect*:

venue: data => {
  const venues = data.collections.venue;
  if (venues !== undefined) {
    const thing = venues.find(venue => {
      const venue_id = venue.data.venue.address['plus-code'].toLowerCase();
      return venue_id === data.venue_id;
    });
    console.log('thing', thing);
  }
},

*Well, not the output I expect, I’m investigating that now, but I at least get access to the collection data.