Gatsby - Fetch permalink based on known slug

gatsby-fetch-permalink.tsx

/*
 * Usage:
 * <Permalink label={component} slug={demo} />
 */

import * as React from 'react';
import { StaticQuery, graphql } from 'gatsby';

// Mimics function to test for internal v. external links from docs
// @link https://www.gatsbyjs.org/docs/gatsby-link/
import Link from './Link';

interface IPermalinkProps {
  label: string;
  slug: string;
  data: {
    allFile: {
      edges: {
        node: {
          relativePath: string;
        };
      }[];
    };
  };
}

const Permalink: React.SFC<IPermalinkProps> = ({ label, slug, data }) => {
  const pagePath = data.allFile.edges.filter((page) => {
    const relativePath = page.node.relativePath.replace('.md', '');
    const re = RegExp(`${slug}$`, 'gi');
    return re.test(relativePath);
  });

  if (pagePath[0]) {
    const permalink = `/${pagePath[0].node.relativePath.replace('.md', '')}/`;

    console.log(permalink);
    return <Link href={permalink}>{label}</Link>;
  }

  return <>{label}</>;
};

export default (props) => (
  <StaticQuery
    query={graphql`
      query {
        allFile(filter: { internal: { mediaType: { eq: "text/markdown" } } }) {
          edges {
            node {
              relativePath
            }
          }
        }
      }
    `}
    render={(data) => <Permalink data={data} {...props} />}
  />
);