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/{{ 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/{{ 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/{{ 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/{{ 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!