resolve markdown content by link

Author: cometkim

gatsby-node.js

@@ -11,17 +11,15 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
 
   createTypes(gql`
     type BlogPost implements Node
-      @dontInfer
-      @childOf(types: ["File", "MarkdownRemark"])
+      @childOf(types: ["MarkdownRemark"])
     {
       postId: String!
       title: String!
-      excerpt: String!
-      rawContent: String! # raw markdown content, better if it would be fully parsed & rendered at the build time
       tags: [String!]!
       date: Date! @dateformat(formatString: "YYYY-MM-DD")
       authors: [String!]!
       guestBio: String
+      remark: MarkdownRemark! @link # backlink to the parent
     }
   `);
 };
@@ -52,8 +50,6 @@ exports.onCreateNode = async ({
         id: nodeId,
         postId: permalink.replace('/blog/', '').replace(/\/$/, ''),
         title: node.frontmatter.title,
-        excerpt: node.excerpt,
-        rawContent: node.rawMarkdownBody,
         tags: node.frontmatter.tags ?? [],
         date: node.frontmatter.date,
         authors: (node.frontmatter.byline ?? '')
@@ -65,6 +61,7 @@ exports.onCreateNode = async ({
 
       createNode({
         ...blogPostContent,
+        remark: node.id,
         parent: node.id,
         children: [],
         internal: {

src/components/BlogPost/index.tsx

@@ -5,11 +5,13 @@ import Marked from "../Marked"
 export const fragments = graphql`
   fragment BlogPost_post on BlogPost {
     title
-    rawContent
     date
     authors
     tags
     guestBio
+    remark {
+      rawMarkdownBody
+    }
   }
 `;
 
@@ -41,7 +43,7 @@ const BlogPost: React.FC<Props> = ({
         <p className="guestBio">{`This guest article contributed by ${byline}, ${post.guestBio}.`}</p>
       )}
 
-      <Marked>{post.rawContent}</Marked>
+      <Marked>{post.remark.rawMarkdownBody}</Marked>
     </div>
   )
 }

src/components/BlogPostPreview/index.tsx

@@ -4,11 +4,13 @@ import { graphql, Link } from "gatsby"
 export const fragments = graphql`
   fragment BlogPostPreview_post on BlogPost {
     title
-    excerpt
     date
     authors
     tags
     postPath: gatsbyPath(filePath: "/blog/{BlogPost.postId}")
+    remark {
+      excerpt
+    }
   }
 `;
 
@@ -36,7 +38,7 @@ const BlogPostPreview: React.FC<Props> = ({
       ))}
     </div>
 
-    <p>{post.excerpt}</p>
+    <p>{post.remark.excerpt}</p>
   </div>
 )