[gatsby-theme-minimal-blog] shadowing additional frontmatter

[myedibleenso]

@LekoArts shared a concise solution for adding frontmatter to a Post. Following that approach, I was able to add a new frontmatter field that is showing up in interactive queries (see my modified gatsby-node.js below).

// My gatsby-node.js
const addFrontmatterField = (name) => async (source, args, context) => {
  const mdxNode = context.nodeModel.getNodeById({
    id: source.parent,
  })
  return mdxNode.frontmatter[name]
}

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes, createFieldExtension } = actions

  createFieldExtension({
    name: `addFrontmatterField`,
    args: {
      name: `String!`,
    },
    extend({ name }) {
      return {
        resolve: addFrontmatterField(name),
      }
    },
  })

  createTypes(`
    interface Post @nodeInterface {
      author: String
    }
    
    type MdxPost implements Node & Post {
      author: String @addFrontmatterField(name: "author")
    }
  `)
}

Unfortunately, I'm still unable to access the new field when shadowing.

Assuming one wanted to access this new author field in blog-list-item.tsx, for example, what changes would be necessary? I tried the following unsuccessfully:

/** @jsx jsx */
import * as React from "react"
import { jsx, Box } from "theme-ui"
import { Link, graphql } from "gatsby"
import ItemTags from "@lekoarts/gatsby-theme-minimal-blog/src/components/item-tags";

type BlogListItemProps = {
  post: {
    slug: string
    title: string
    author?: string
    date: string
    excerpt: string
    description: string
    timeToRead?: number
    tags?: {
      name: string
      slug: string
    }[]
  }
  showTags?: boolean
}

const BlogListItem = ({ post, showTags = true }: BlogListItemProps) => (
  <Box mb={4}>
    <Link to={post.slug} sx={(t) => ({ ...t.styles?.a, fontSize: [1, 2, 3], color: `text` })}>
      {post.title}
      <p> Author: {post.author ? post.author : `????` } </p>
    </Link>
    <p sx={{ color: `secondary`, mt: 1, a: { color: `secondary` }, fontSize: [1, 1, 2] }}>
      <time>{post.date}</time>
      {post.tags && showTags && (
        <React.Fragment>
          {` — `}
          <ItemTags tags={post.tags} />
        </React.Fragment>
      )}
    </p>
  </Box>
)

export default BlogListItem

I thought perhaps I needed to also shadow @lekoarts/gatsby-theme-minimal-blog-core/src/templates/blog-query.tsx, but that didn't seem to work either. In fact, that gives me a warning:

The GraphQL query in the non-page component "/app/src/@lekoarts/gatsby-theme-minimal-blog-core/src/templates/blog-query.tsx" will not be run.

[md-weber]

Exactly what I needed; thanks to you, I found how to add the author field to my posts, and if I try to shadow the blog-query file, it throws me errors that the query can only be used on a page level.

I tried to edit the parent file and was able to receive the author. Currently, I am trying to work with StaticQuery but was not yet successful. I will try tomorrow a bit more. I will keep you posted if I find a good solution.

[half0wl]

I figured out how to do this via #438 (comment). There's no modification required to gatsby-node at all - you can just inject a field into the frontmatter and query for it via GQL. Here's what I did:

Shadow the homepage query to include mdx frontmatter (@lekoarts/gatsby-theme-minimal-blog-core/templates/homepage-query.tsx):

<truncated>
      nodes {
        <truncated>
        description
        tags {
          name
          slug
        }
+        ... on MdxPost {
+          parent {
+            ... on Mdx {
+              frontmatter {
+                $YOUR_FIELD
+              }
+            }
+          }
+        }
      }
<truncated>

This makes it available in the posts object downstream in this shape:

export type MBHomepageProps = {
  posts: {
    slug: string
    title: string
    date: string
    excerpt: string
    description: string
    timeToRead?: number
    tags?: {
      name: string
      slug: string
    }[]
+    parent: {
+      frontmatter: {
+        [key: string]: any
+      }
+    }
  }[]
}

You can then access your custom field via post.parent.frontmatter.$YOUR_FIELD.

I used this to add a featured field to the frontmatter for pinning blog posts in my homepage: half0wl/raychen.io@559567f.

This is an old discussion, but I hope it helps someone stumbling here by Google :-)