Gatsby: 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: