refactor: use a fragment for post previews

NobbZ · Jun 27, 2023 · f925bb7 · f925bb7
1 parent b7a3323
commit f925bb7
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 39 deletions.
diff --git a/src/components/articlepreview.tsx b/src/components/articlepreview.tsx
@@ -1,11 +1,11 @@
 import * as React from "react";
 
-import { Link } from "gatsby";
+import { Link, graphql } from "gatsby";
 import { GatsbyImage, ImageDataLike, getImage } from "gatsby-plugin-image";
 
 import { Tag } from "../templates/tags";
 
-type BlogPostNode = Queries.BlogPostsQuery["allMdx"]["nodes"][0];
+type BlogPostNode = Queries.PreviewDataFragment;
 interface PreviewProps {
   node: BlogPostNode;
 }
@@ -62,3 +62,26 @@ export const Preview = ({ node }: PreviewProps) => {
     </article>
   );
 };
+
+export const query = graphql`
+  fragment PreviewData on Mdx {
+    excerpt
+    fields {
+      readingTime {
+        text
+      }
+    }
+    frontmatter {
+      date
+      title
+      slug
+      tags
+      hero_image_alt
+      hero_image {
+        childImageSharp {
+          gatsbyImageData(width: 200)
+        }
+      }
+    }
+  }
+`;
diff --git a/src/gatsby-types.d.ts b/src/gatsby-types.d.ts
@@ -2683,6 +2683,8 @@ type GatsbyImageSharpFluid_withWebp_tracedSVGFragment = { readonly tracedSVG: st
 
 type GatsbyImageSharpFluidLimitPresentationSizeFragment = { readonly maxHeight: number, readonly maxWidth: number };
 
+type PreviewDataFragment = { readonly excerpt: string | null, readonly fields: { readonly readingTime: { readonly text: string | null } | null } | null, readonly frontmatter: { readonly date: string, readonly title: string, readonly slug: string, readonly tags: ReadonlyArray<string>, readonly hero_image_alt: string, readonly hero_image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } };
+
 type SiteTitleQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -2698,7 +2700,7 @@ type TagInfoQueryVariables = Exact<{
 }>;
 
 
-type TagInfoQuery = { readonly allMdx: { readonly totalCount: number, readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly excerpt: string | null, readonly fields: { readonly readingTime: { readonly text: string | null } | null } | null, readonly frontmatter: { readonly hero_image_alt: string, readonly title: string, readonly slug: string, readonly date: string, readonly tags: ReadonlyArray<string>, readonly hero_image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } } }> } };
+type TagInfoQuery = { readonly allMdx: { readonly totalCount: number, readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly excerpt: string | null, readonly fields: { readonly readingTime: { readonly text: string | null } | null } | null, readonly frontmatter: { readonly date: string, readonly title: string, readonly slug: string, readonly tags: ReadonlyArray<string>, readonly hero_image_alt: string, readonly hero_image: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } } }> } };
 
 type TagListQueryVariables = Exact<{ [key: string]: never; }>;
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -22,25 +22,8 @@ export const query = graphql`
   query BlogPosts {
     allMdx(sort: { frontmatter: { date: DESC } }) {
       nodes {
-        fields {
-          readingTime {
-            text
-          }
-        }
-        frontmatter {
-          date
-          title
-          slug
-          tags
-          hero_image_alt
-          hero_image {
-            childImageSharp {
-              gatsbyImageData(width: 200)
-            }
-          }
-        }
         id
-        excerpt
+        ...PreviewData
       }
     }
   }

diff --git a/src/templates/tags.tsx b/src/templates/tags.tsx
@@ -90,24 +90,7 @@ export const pageQuery = graphql`
       edges {
         node {
           id
-          excerpt
-          fields {
-            readingTime {
-              text
-            }
-          }
-          frontmatter {
-            hero_image_alt
-            hero_image {
-              childImageSharp {
-                gatsbyImageData(width: 200)
-              }
-            }
-            title
-            slug
-            date
-            tags
-          }
+          ...PreviewData
         }
       }
     }