YAML + eleventyComputed + null Data object

[WebShapedBiz]

Hi.

I'd like to know is it possible to use eleventyComputed in YAML frontmatter with the Data object that may or may not be null.
For example, if your data model has a field that is not required, how to use it with eleventyComputed without getting an error saying TypeError: Reduce of empty array with no initial value, which I always get if I have mistyped my variable or have a null variable thus ending up serving eleventyComputed with a null Data object.

Cheers.

[pdehaan]

Can you post an example of your frontmatter/data?
I’m not sure if you might need to use JavaScript front matter, or possibly something else.

[WebShapedBiz]

Thank you @pdehaan for your time and effort, as usual :-)
It really doesn't matter what example is, generally, if you provide a null or undefined data object, you'll get the aforementioned error.
I'm guessing that using JS front matter can do the trick.

Cheers.

[pdehaan]

I might not be fully understanding what you mean by:

"YAML frontmatter with the Data object that may or may not be null."

---

1. I'm not seeing the error when I use eleventyComputed with template strings (where one value is undefined; {{age}}):

   ---
   title: pdehaan
   eleventyComputed:
     largeTitle: "<h1>{{ title}} {{ age }}</h1>"
   ---
   
   {{ largeTitle | safe }}

   OUTPUT

   <h1>pdehaan </h1>

2. Similarly, if I use JavaScript frontmatter with a function for largeTitle (where one value is undefined ${data.age}):

   ---js
   {
     title: "pdehaan",
     eleventyComputed: {
       largeTitle: (data) => `<h1>${ data.title } ${ data.age }</h1>`
     }
   }
   ---
   
   {{ largeTitle | safe }}

   OUTPUT

   <h1>pdehaan undefined</h1>

[WebShapedBiz]

Your example is basically what I'm talking about. The only difference is that I'm fetching my data with API in _data folder. Also, the error message Reduce of empty array with no initial value, is kinda self-explanatory and I've already learned that this means I've mixed something up in my YAML front matter.

[pdehaan]

Still not reproducing the error with dynamically fetching a JSON object with a string.

But it looks like you're using some API that may or may not return an array somewhere in the response and it isn't able to use Array#reduce... Is the API you're using public? Or can you paste the sample response that you're getting and the eleventyComputed you're trying to use?

// ./src/_data/zach_github.js
const fetch = require("node-fetch");

module.exports = async () => {
  const res = await fetch("https://github.com/zachleat.json");
  return res.json();
};

---
# ./src/zach.njk
eleventyComputed:
  msg: "{{zach_github.message}}"
---

<pre>
msg={{msg}}
</pre>

OUTPUT

<!-- ./www/zach/index.html -->
<pre>
msg=Hello there, wayfaring stranger. If you’re reading this then you probably didn’t see our blog post a couple of years back announcing that this API would go away: http://git.io/17AROg Fear not, you should be able to get what you need from the shiny new Events API instead.
</pre>

[WebShapedBiz]

Thank you @pdehaan for your involvement here. The problem is not with the data file since all I need to do when I see that error message is to check my YAML. The API is private, coming from my client's GraphCMS.
I'll be more observant when this happens again and I will try to analyze that issue better.