sm

Fix "Error: Could not resolve pagination key in template data" in Eleventy

In a recent Eleventy project, I wanted to create a single collection for tags with two keys: alphabetical for an array of all tags, and popular for an array of arrays with the tag and number of times it was used.

To access either "sub-collection", I could dive into the object like collections.tagList.alphabetical. This worked like a dream in my template and markdown files, and I thought maybe I was on to a new cool pattern for Eleventy.

But when I tried to paginate the sub-collection, everything fell apart. Eleventy errored with the following message:

Problem writing Eleventy templates: (more in DEBUG output)
> Could not resolve pagination key in template data: collections.tagList.alphabetical

`Error` was thrown:
    Error: Could not resolve pagination key in template data: collections.tagList.alphabetical

The pagination code in question looked like:

---
pagination:
  data: collections.tagList.alphabetical
  alias: tag
permalink: /tag//
---

Interesting. Maybe the collection hasn't been created by the time the pagination code runs, I guessed. To test this, I tried paginating collections.tagList to see if the alphabetical key was present:

---
pagination:
  data: collections.tagList
  alias: tag
permalink: /tag//
---

This created pages for alphabetical and popular, which proved my hypothesis wrong: the alphabetical data does exist when the pagination occurs.

Maybe it had something to do with paginating nested objects? To confirm, I added a test object to the frontmatter and tried to paginate it:

---
pagination:
  data: test.test.test
  alias: tag
permalink: /tag//
test:
  test:
    test: ["a", "b", "c"]
---

This worked as expected, creating pages for a, b, and c. So it isn't an issue with paginating deep objects.

With two incorrect hypotheses, it was time to look for outside help. I posted in 11ty Discord and did some searching. My initial queries brought up two issues: an actual bug from 2018 and some invalid JSON from 2019. Neither of which provided the solution here.

Feeling at a dead end, I decided to rethink the problem. I couldn't paginate over a nested collection object, but normal collections work just fine. If I could flatten my clever tagsList into multiple collections, the problem would be solved.

Instead of collections.tagList.alphabetical and collections.tagList.popular, I created two collections: collections.tagsAll and collections.tagsPopular. This required an addition iteration over the post data (one for each collection), but that small increase in build time isn't an issue for this project.

The final code to fix the "Error: could not resolve pagination key in template data" is a flattened collection:

---
pagination:
  data: collections.tagsAll
  alias: tag
permalink: /tag//
---

This works well, but I would still love to find a way to get the original solution to work. Let me know if you have a better way to solve this problem. 👍

Happy paginating!

Reply by email Matthew 16:19 More Articles