How do precompiledCollections work?

[mrmartineau]

I have a page that is generated by a serverless function. The sidebar on that page makes use of a collection I created. I followed the steps (outlined here) to create a json file with the information that I want:

exports.data = function () {
  return {
    permalink:
      './netlify/functions/searcher/serverless-collections-tagList.json',
    permalinkBypassOutputDir: true,
    eleventyExcludeFromCollections: true,
  }
}

exports.render = function ({ collections }) {
  return JSON.stringify({
    tagList: collections.tagList,
  })
}

This generates a json file that has an array of content like this:

{
  "tagList": [
    {
      "name": "javascript",
      "count": 45,
      "color": "hsla(91,40%,60%,0.6)",
      "path": "javascript"
    },
    {
      "name": "react",
      "count": 32,
      "color": "hsla(269,40%,60%,0.6)",
      "path": "react"
    },
  ]
}

I have passed the contents of that file to my serverless function like so:

const precompiledTagListCollections = require('./serverless-collections-tagList.json')
let elev = new EleventyServerless('searcher', {
  path: new URL(event.rawUrl).pathname,
  query: searchQuery,
  functionsDir: './netlify/functions/',
  precompiledCollections: precompiledTagListCollections,
})

I think that should be enough to ensure that my templates now have access to the collections.tagList data, but it is not available. I have also tried these to no avail:

• {{ tagList }}
• {{ page.tagList }}
• {{ eleventy.serverless.tagList }}
• {{ precompiledCollections.tagList }}

Is there something else I've missed? or should the initial way have worked?

Another question I have is around the shape of the returned collection data. Does it need to formatted in a specific way? The docs here suggest that all collections need to follow a specific structure, but I've been able to use my collections.tagList so far without any problems.

I was successful in passing the data in other ways (by not using precompiledCollections) but so far have not found a way to populate the collections.tagList data like I want to. These other ways use the config property on the EleventyServerless function to addGlobalData or add a new collection with addCollection. 11ty gave an error when I tried to overwrite the existing collection, so I created a new one.

let elev = new EleventyServerless('searcher', {
  path: new URL(event.rawUrl).pathname,
  query: searchQuery,
  functionsDir: './netlify/functions/',
  precompiledCollections: precompiledTagListCollections,
  config: function (config) {
    config.addGlobalData('tagList', precompiledTagListCollections.tagList)
    config.addCollection('tagListServerless', () => {
      return precompiledTagListCollections.tagList
    })
  },
})

Now my template can make use of both of these:

• {{ collections.tagListServerless }}
• {{ tagList }}

🎉

But it is still of no use because my sidebar still relies on collections.tagList which is defined in my base.njk template.. Now, I am fairly new to 11ty so there might be something obvious that I'm missing, but I just can't see it. Please steer me in the right direction. If you interested in helping out, the repo where I'm using this is at

• Repo: https://github.com/mrmartineau/11ty-notes
• eleventy.js: https://github.com/mrmartineau/11ty-notes/blob/main/.eleventy.js
• search template that is rendered by the serverless function: https://github.com/mrmartineau/11ty-notes/blob/main/src/search.njk

[zachleat]

I think you might be right, there is likely a bug in how these collections are injected:

See this:

eleventy/src/TemplateMap.js

Line 387 in 05c6263

let precompiled = this.config.precompiledCollections;

I don’t think setCollectionByTagName is called unless it’s known as a template dependency (via that collection declared in tags or as a pagination target, etc.). I bet it would work if you used eleventyImport to declare the dependency in a template:

https://www.11ty.dev/docs/collections/#declare-your-collections-for-incremental-builds

[mrmartineau]

I tried using eleventyImport but it didn't work.. I think I used it correctly

eleventyImport:
  collections: ['tagList']

It is worth noting that if I add {{ collections.tagList | dump }} to my search template, I do actually get some data returned:

[{"name":"untagged","count":0,"color":"hsla(60,40%,60%,0.6)","path":"untagged"}]

My tagList is created like so:

eleventyConfig.addCollection('tagList', (collection) => {
  const tagsObject = {
    untagged: 0,
  }
  collection.getFilteredByGlob('src/notes/*.md').forEach((item) => {
    if (item.data.draft) {
      return
    }
    if (!item.data.tags) {
      tagsObject.untagged += 1
      return
    }
    item.data.tags.forEach((tag) => {
      if (typeof tagsObject[tag] === 'undefined') {
        tagsObject[tag] = 1
      } else {
        tagsObject[tag] += 1
      }
    })
  })

  const tagList = []

  Object.keys(tagsObject).forEach((tag) => {
    const tagName = slugify(tag)
    tagList.push({
      name: tag,
      count: tagsObject[tag],
      color: getColourFromString(tagName),
      path: tagName,
    })
  })
  return tagList.sort((a, b) => b.count - a.count)
})

All this is to say that no matter what tagList will always have at least one item (the untagged item shown above). Does this mean that the actually collection my template needs access to is the notes template (collection.getFilteredByGlob('src/notes/*.md'))? and that my template does actually have access to the tagList template?

[mrmartineau]

Also, I was able to solve my issue of not having that collection in the sidebar by hacking around the problem. I used the same data from what I wanted to use for the precompiledCollections but set it as global data in my serverless function (like I mentioned above) like so:

config.addGlobalData('tagList', precompiledTagListCollections.tagList)

And in my template I use either the collections.tagList or the tagList (global data) like so:

{% set tags = tagList or collections.tagList %}

And then my sidebar I loop through tags.

I am still keen to help solve the precompiledCollections issue though..