Gridsome got taxonomy. What does that mean?
Tags: gridsome, vue, ssg
Published: 2019-02-25 21:21:28

---
title: Gridsome got taxonomy. What does that mean?
published: true
description: Create references in the GraphQL schema to build dynamic pages.
tags: gridsome, vuejs, ssg
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2fa5wfpcbwbi9tdz099x.png
---

> All references in the GraphQL schema has been a one-way relation. This release introduces a new field called `belongsTo` for all content types. The field will list all nodes that have a reference back to the current node which makes it very useful to create taxonomy pages etc. The field can also take the same arguments as a collection. *Source: [Gridsome v0.5](https://gridsome.org/blog/2019/02/19/gridsome-v05)*

Still wondering what does that means? 🤔

In simple words, instead of creating all those author and tags pages manually.

* `src/pages/author/tommy`
* `src/pages/tag/vuejs`
* `src/pages/tag/getting-started`
* `src/pages/author/mittalyashu`
* `src/pages/author/hvedvik`
* `src/pages/tag/gridsome`

Using this new feature called **Taxonomy**, you can create those pages automatically just by defining few things here and there.

Sounds interesting? Let's dive right in.

🚧 **Spoiler alert:** You can try it now by [cloning this branch](https://github.com/gridsome/gridsome-starter-markdown-blog/tree/feat/authors-and-categories).

Or, you can follow along with me and learn step-by-step.

To make it more relevant to you, we will start with this [source code](https://github.com/gridsome/gridsome-starter-markdown-blog) as a base. In this example, we are going to **create two content types**, a `Author` and a `Tag` types. We do that in the `gridsome.config.js` file, by creating a Author collection.

```js
{
      // Add Authors collection
      use: '@gridsome/source-filesystem',
      options: {
        path: 'authors/*.md',
        typeName: 'Author',
        route: '/author/:id'
      }
    }
```

Next, to link `Author` and `Tags` with our `Posts`, we need to create a **reference using `refs`**.

```js
refs: {
  // Add a reference to Author GraphQL collection
  author: 'Author',

  // Auto create a collection for all categories
  categories: {
    typeName: 'Category',
    route: '/category/:slug',
    create: true
  }
}
```
To get a gist, this is how your `gridsome.config.js` file should look like. As you can see the **`Author` collection, look exactly the same as `Post` collection**, the only difference is in the `path`, `typeName` and `route`.

We don't have to create a seperate collection outside the `refs`, since tags are part of posts. *Sure, you can customize, where you can define the tags collection outside the ref to create a separate collection of tags.*

```js
module.exports = {
  siteName: `Gridsome Starter Blog`,
  titleTemplate: `%s - Gridsome`,

  plugins: [
    {
      // Add Post collection
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/*.md',
        typeName: 'Post',
        route: '/:slug',
        refs: {
          // Add a reference to Author GraphQL collection
          author: 'Author', 
          
          // Auto create a collection for all categories
          tags: { 
            typeName: 'Tag',
            route: '/tag/:slug',
            create: true
          }
        }
      }
    },
    {
      // Add Authors collection
      use: '@gridsome/source-filesystem',
      options: {
        path: 'authors/*.md',
        typeName: 'Author',
        route: '/author/:id'
      }
    },
  ]
}
```
Next, at the root of the repository, **create a directory name `authors`**, create `markdown` files with different author name and add some images of them too *(optional)*.

It's not mandatory to create authors directory at the root of the repository, it's just the way we have defined in `gridsome.config.js`.

```
.
├─ authors
│  ├─ john-deo.md
│  ├─ marina.md
│  ├─ sonnie-hiles.md
│  └─ images
│     ├─ image-1.jpg
│     ├─ image-2.jpg
│     └─ image-3.jpg
├─ blog
.
.
.
├─ README.md
├─ gridsome.config.js
└─ package.json
```
The format for each markdown file for author can be something like this, you can add additional properties and value in the `front-matter`.

```md
---
id: john-doe
title: John Doe
image: ./images/image-3.jpg
---

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe sunt quos rerum culpa! Non voluptates nesciunt, nemo, omnis dolor temporibus repellat ab magnam laboriosam maiores ullam, distinctio mollitia quia vel!
```
Lastly, it's time to **add some information about the author and tags** to our blog posts.

Open any file and update the front matter with the following fields

```md
tags: ["forest", "tree", "sunset", "rocks"]
author: marina
```
With finger crossed 🤞🏻, Gridsome should **compile the code successfully** and output the result at `localhost:8080`, here's the preview 😎.

![Gridsome starter markdown blog preview with taxonomy](https://thepracticaldev.s3.amazonaws.com/i/8w9tsvxbv2rl3hypn9hq.png)

.
.
.

![Pinky promise](https://media.giphy.com/media/8m1T2fkE3OzNBpcXeM/giphy.gif)

Repeat after me *"I, pinky promise with Yashu Mittal, to try this new Taxonomy feature from Gridsome"*. 😉

Wait, wait. This is not the end of the story, there is more, Gridsome has released many other awesome feature for you to try out in version 0.5, check out this full article [Gridsome v0.5](https://gridsome.org/blog/2019/02/19/gridsome-v05) to know more.

### Reference

* [Gridsome](https://gridsome.org/)
* [Gridsome starter markdown blog](https://github.com/gridsome/gridsome-starter-markdown-blog)

✋🏻 I am creating a **Gridsome casper theme for free**, and I would appreciate if you could help out by [becoming my patreon](https://www.patreon.com/mittalyashu).

Thanks