Is lodash really necessary in 'Creating tags pages for blog posts'?

[CrowsVeldt]

I added a tags page to my site following Creating tags pages for blog posts and I'm wondering about the use of lodash. I am still new at programming so there may be a reason it is necessary that I'm unaware of, but if that is the case wouldn't be better to mention it in the article?

I removed it from my site, just to make sure it is possible, and it hasn't caused any problems so far.

For example in place of the following:

    // Tag pages:
    let tags = [];
    // Iterate through each post, putting all found tags into `tags`
    _.each(posts, edge => {
      if (_.get(edge, 'node.frontmatter.tags')) {
        tags = tags.concat(edge.node.frontmatter.tags);
      }
    });
    // Eliminate duplicate tags
    tags = _.uniq(tags);

I have this:

      let tags = []

      posts.forEach(edge => {
        if (edge.node.frontmatter.tags) {
          tags = tags.concat(edge.node.frontmatter.tags)
        }
      })

      tags = [...new Set(tags)]

I spent a few hours checking the commit history, issues, and PRs, and didn't find any discussion of this. Please let me know if this is out of place or anything.

[tsriram]

No, lodash is not necessary. It's a utility library which makes a lot of things simple. In this case, your code should just work fine without lodash (unless I'm overseeing something).

Perhaps you need some error handling I guess, say if a node doesn't have (not sure if it could be a case though) frontmatter, you'll have handle that.

[m-allanson]

@CrowsVeldt It's a good question! I don't think lodash is absolutely necessary in this case. However it's slightly safer than the no lodash (nodash?) example. The get() function can protect you against errors from unusual data.

e.g. if your edge has no frontmatter at all:

const edge = { node: {} }

if (edge.node.frontmatter.tags) { 
  // do some things here
}

// The above code will throw an error like:
// Uncaught TypeError: Cannot read property 'tags' of undefined
//    at <anonymous>:1:27

// Here, get() just returns undefined and carries on
if (_.get(edge, 'node.frontmatter.tags')) {
 // do some things here
}

Generally I agree we should be keeping things as 'standard' as possible, particularly in the docs. What do other folks think about removing lodash from this example?

[CrowsVeldt]

That makes sense, thanks!

I think it stands out in particular because the rest of the docs don't use lodash, and then it's used here without an explanation as to what value it provides.

I also think keeping the docs standard is good. I think at least there should be a note along the lines of:

lodash isn't strictly necessary here but removes the need to explicitly handle errors like...

I could try to make a PR to that effect. What do you think?

[KyleAMathews]

Hmm yeah — if we're using lodash, we should show importing individual functions. Importing the whole library adds quite a bit of weight. And if we can easily avoid it we should.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[laurosilvacom]

Creating this comments for anyone else that has search for this answer:

You can install lodash.isequal as a single module without installing the whole lodash package like so:

npm install --save lodash.kebabcase

Then initializing lodash.kebabcase:

const kebabCase = require('lodash.kebabcase')

...

{`/tags/${kebabCase(tag)}`}

Should we update the docs, @KyleAMathews? I can make a PR. https://www.gatsbyjs.org/docs/adding-tags-and-categories-to-blog-posts/#modify-gatsby-nodejs-to-render-pages-using-that-template

Before:

After: