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.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

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.

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free โ†’

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay