DEV Community

Chloe
Chloe

Posted on

Tags in Gridsome

I've recently attempted to setup tags on my blog posts I'm attempting to create a page as detailed in the docs to be able to see posts with various tags. I've setup a template using src/templates/Tag.vue and updated my gridsome.server.js file as suggested:

  api.loadSource((actions) => {
    const posts = actions.addCollection("Post");
    const tags = actions.addCollection("Tag");

    // makes all ids in the `tags` field reference a `Tag`
    posts.addReference("tags", "Tag");

    tags.addNode({
      id: "1",
      title: "The author",
    });

    posts.addNode({
      id: "1",
      title: "A post",
      tags: ["1"],
    });
  });
Enter fullscreen mode Exit fullscreen mode

but how do I actually create that page? Do I need ot setup it up my config file to create it? Or do I setup a single file component? I don't understand and the docs aren't clear it seems as though it's missing a step or am I misunderstanding? Has anyone done this if so what am I missing? I am referencing the tags under the posts in my config.

    {
      use: "@gridsome/source-filesystem",
      options: {
        typeName: "Post",
        path: "content/posts/**/*.md",
        refs: {
          // Creates a GraphQL collection from 'tags' in front-matter and adds a reference.
          tags: {
            typeName: "Tag",
            create: true,
          },
        },
      },
    },
Enter fullscreen mode Exit fullscreen mode

Any help appreciated.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (5)

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt β€’

If similar to Gatsby, it is possible to avoid using GraphQL.

Also, you can use template instead of page.

Collapse
 
cguttweb profile image
Chloe β€’

Thanks for the reply. I've setup a template but not sure how I then get a list of posts with tags? Is it just I need to add it to my config? I'm missing something I'm just not sure what that is.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt β€’

Have you tried GraphQL explorer?

Collapse
 
valentinprgnd profile image
Valentin Prugnaud 🦊 β€’

Didn't try it, but maybe this can help? gridsome.org/docs/taxonomies/

Collapse
 
cguttweb profile image
Chloe β€’

Thanks I've followed that but it doesn't make sense. I've even looked at the default blog starter and tried copying that but that fails too. I'll have to take a closer look this weekend try and figure it out.

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more