How can I get all blog tags data?

[WinmezzZ]

I want to collect all blog post tags data in my custom component.

I searched all the documents and Google and no right answer for me. Then I saw the BlogTagsListPage component used it from props, I had tried it but i found it just work for this component only.

So is there any api to get it? or any other way to resolve this.

I need your help honest. Thanks for you guys!

[Josh-Cena]

There's no way to query blog tags from external pages, unfortunately. We are still pondering if it's worth adding to the global data, but since there's such a high demand (>5 people asking already) I would try to implement this as part of #4492.

One way you could do this is through enhancing the blog plugin, regenerate the tags data, and inject it to your custom page. (#4492 (comment))

[WinmezzZ]

Yeah, I'll try it. It's a big work to do.

[slorber]

The first thing we should do is to create some shared blog data bundle (containing tags) that are passed to every blog page => this will make it more convenient to display tags in multiple blog pages, and will be required for #5461

---

Now, the question is how do we display tags on non-blog pages, like your homepage or docs?

I'm not a fan of the "frontmatter propagation" to global data. Frontmatter only contains a subset of the useful data to inject in a page and it's not the most generic solution. Plugin extension already allows users to add global data themselves, including frontmatter, so I'd prefer we work on an extension API rather than a frontmatter propagation API:

function blogPluginEnhanced(context, options) {
  const blogPluginInstance = blogPlugin(context, options);

  return {
    ...blogPluginInstance,
    async contentLoaded(...contentLoadedArgs) {
      await blogPluginInstance.contentLoaded(...contentLoadedArgs);
      const { actions, content } = contentLoadedArgs[0];
      const { setGlobalData } = actions;
      const { blogTags } = content;
	  setGlobalData({blogTags});	
    }
  };
}

A more generic solution is something like Gatsby do: the homepage is able to declare which data it needs thanks to a query. In our case, we could do something similar (without GraphQL) and the homepage could say I need bundle "blog:instanceId:blogTags" => less flexible API (compared to Gatsby) but simpler and it would work

[WinmezzZ]

It's works very will and easy to me to use setGlobalData and useGlobalData, thanks every much.

If it possible for updates on this topic please metion to me.

[dsmmcken]

async function blogPluginEnhanced(context, options) {
  const blogPluginInstance = await blogPlugin(context, options);

  return {
    ...blogPluginInstance,
    async contentLoaded(...contentLoadedArgs) {
      await blogPluginInstance.contentLoaded(...contentLoadedArgs);
      const { actions, content } = contentLoadedArgs[0];
      const { setGlobalData } = actions;
      const { blogTags } = content;
	  setGlobalData({blogTags});	
    }
  };

I was using a similar solution, and between beta.14 -> beta.18 this broke. Tracked it down to now needing to await blogPlugin.

This was tricky to debug, after upgrading and attempting to run gave just an ambiguous [ERROR] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined only from attempting to npm start

[marklundin]

This does not seem to work anymore, It throws TypeError: The "paths[0]" argument must be of type string. Received undefined