From f925bb728bf33eaf8d3d30f94a8bfc47116c02a5 Mon Sep 17 00:00:00 2001
From: Norbert Melzer <timmelzer@gmail.com>
Date: Tue, 27 Jun 2023 21:17:50 +0200
Subject: [PATCH] refactor: use a fragment for post previews

---
 src/components/articlepreview.tsx | 27 +++++++++++++++++++++++++--
 src/gatsby-types.d.ts             |  4 +++-
 src/pages/index.tsx               | 19 +------------------
 src/templates/tags.tsx            | 19 +------------------
 4 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/src/components/articlepreview.tsx b/src/components/articlepreview.tsx
index cca895e..1a68989 100644
--- 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
index c03b4c1..feaf66f 100644
--- 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
index 7f573a3..8e22c41 100644
--- 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
index 39e1f90..0d7b178 100644
--- 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
         }
       }
     }