Gatsby-Starter-Lumen で作成したブログに、カテゴリーリストを追加したい

Gatsby-Starter-Lumen スターターを使い、 Gatsby でブログを作成している者です。

ブログに、記事をカテゴリーごとに分類して表示する「カテゴリーリスト」のメニューを作成したいと考えています。

下記のサイトを参考にカテゴリーリストを作成中なのですが、うまくいきません。

https://capsule-man.netlify.com/posts/add-category-list

記事の該当部分を引用いたします。

カテゴリ名がkeyで記事数がvalueである連想配列であるcategoriesは、あらかじめ親コンポーネントであるSidebarの処理の中で作っておき、それを子のCategoriesInSidebarにpropsとして受け渡している。

Sidebar内では次のようにしてcategoriesを作成する。

// lodash使う
import uniq from 'lodash/uniq'

// もっと良いやり方あるか
let categories = {};
const categories_list  = 
this.props.data.allCategoryNames.edges.map((edge) => {
   return (edge.node.frontmatter.category)
})
uniq(categories_list).forEach(category => {
  categories[category] = categories_list.filter(item => item ===     category).length;
});

// categories ==> {Javascript: 2, Docker: 1, Python: 1}

// 以下のように受け渡す
<CategoriesInSidebar data={categories}/>

具体的には、このコードを、どの部分に書き込めばよいのかが分からない状態です。
親コンポーネント Sidebar 内にある index.jsx 内を編集するべきだと思うのですが、
適切に編集できず、動作しません。

どのような編集がよいか、どなたかお示し頂けないでしょうか？
Sidebar 内にある index.jsx の内容をお示し致します。
宜しくお願いたします。

import React from 'react';
import get from 'lodash/get';
import Link from 'gatsby-link';
import Menu from '../Menu';
import Links from '../Links';
import profilePic from '../../pages/photo.jpg';
import './style.scss';

class Sidebar extends React.Component {
  render() {
    const { location } = this.props;
    const { author, subtitle, copyright, menu } = this.props.siteMetadata;
    const isHomePage = get(location, 'pathname', '/') === '/';

    /* eslint-disable jsx-a11y/img-redundant-alt */
    const authorBlock = (
      <div>
        <Link to="/">
          <img
            src={profilePic}
            className="sidebar__author-photo"
            width="75"
            height="75"
            alt={author.name}
          />
        </Link>
        { isHomePage ? (
          <h1 className="sidebar__author-title">
            <Link className="sidebar__author-title-link" to="/">    {author.name}</Link>
          </h1>
        ) :
          <h2 className="sidebar__author-title">
            <Link className="sidebar__author-title-link" to="/">    {author.name}</Link>
          </h2>
        }
        <p className="sidebar__author-subtitle">{subtitle}</p>
      </div>
    );
    /* eslint-enable jsx-a11y/img-redundant-alt */

    return (
      <div className="sidebar">
        <div className="sidebar__inner">
          <div className="sidebar__author">
            {authorBlock}
          </div>
          <div>

            <Menu data={menu} />
            <Links data={author} />
            <p className="sidebar__copyright">
              {copyright}
            </p>
          </div>
        </div>
      </div>
    );
  }
}

export default Sidebar;

export const conponentQuery = graphql`
  fragment sidebarFragment on siteMetadata_2{
    title
    subtitle
    copyright
    menu {
      label
      path
    }
    author {
      name
      email
      twitter
      facebook
    }
  }
`;