chore: update

Author: georgiee

gatsby-node.js

@@ -27,6 +27,51 @@ exports.onCreateNode = (gatsbyCreateNodeArgs) => {
   }
 };
 
+/**
+ * We create the preview cards within `onCreateNode`
+ * but we have to tell gatsby about the foreign key relationship
+ * of the linked File.
+ */
+exports.createSchemaCustomization = ({ actions, schema }) => {
+  const { createTypes } = actions;
+
+  const typeDefs = [
+    /**
+     * Variant 1: use `@link` and link the given field
+     * You can't replace fields.socialCard hence the creation of the node in the parent
+     */
+    `type MarkdownRemark implements Node { 
+      socialCard: File @link(from: "fields.socialCard")
+    }`,
+    /**
+     * Variant 2: use `buildObjectType` and resolve the
+     * foreign key relation through a resolver. The `@link` above
+     * is basically syntax sugar for this. I want to show both variants
+     * here for education purposes as it was a long bumpy road.
+     *
+     * Before ew used the deprecated fielname___NODE way of adding
+     * the FK relationship which fails for incremental builds in gatsby 4
+     */
+    schema.buildObjectType({
+      name: 'SyPersonioJob',
+      fields: {
+        socialCard: {
+          type: 'File',
+          resolve: (source, args, context, info) => {
+            return context.nodeModel.getNodeById({
+              id: source.fields.socialCard,
+              type: 'File',
+            });
+          },
+        },
+      },
+      interfaces: ['Node'],
+    }),
+  ];
+
+  createTypes(typeDefs);
+};
+
 exports.createPages = async (createPagesArgs) => {
   await createCareerPages(createPagesArgs);
   await createBlogPosts(createPagesArgs);

gatsby/create-node/create-preview-cards.js

@@ -26,7 +26,7 @@ const createPreviewCard = async (
   if (fileNode) {
     createNodeField({
       node,
-      name: `socialCard___NODE`,
+      name: `socialCard`,
       value: fileNode.id,
     });
   }

src/pages/career.tsx

@@ -8,12 +8,10 @@ import { IGatsbyImageData } from 'gatsby-plugin-image';
 
 interface CareerMarkdownQuery {
   htmlAst: string;
-  fields: {
-    socialCard: {
-      childImageSharp: {
-        fixed: {
-          src: string;
-        };
+  socialCard: {
+    childImageSharp: {
+      fixed: {
+        src: string;
       };
     };
   };
@@ -34,7 +32,7 @@ interface CareerProps {
 const Career = (props: CareerProps) => {
   const { t } = useTranslation();
   const markdown = props.data.markdownRemark;
-  const socialCardPath = markdown.fields.socialCard.childImageSharp.fixed.src;
+  const socialCardPath = markdown.socialCard.childImageSharp.fixed.src;
 
   return (
     <>
@@ -88,12 +86,10 @@ export const CareerPageQuery = graphql`
       fileAbsolutePath: { regex: "/(pages/career)/" }
       frontmatter: { language: { eq: $language } }
     ) {
-      fields {
-        socialCard {
-          childImageSharp {
-            fixed(width: 1440, height: 760) {
-              src
-            }
+      socialCard {
+        childImageSharp {
+          fixed(width: 1440, height: 760) {
+            src
           }
         }
       }

src/templates/blog-post.tsx

@@ -20,7 +20,6 @@ const BlogArticleTemplate: React.FC<BlogArticleTemplateProps> = ({
   const { t } = useTranslation();
   const markdown = data.markdownRemark;
 
-  const socialCardPath = markdown.fields.socialCard.childImageSharp.fixed.src;
   const shareImagePath =
     markdown.frontmatter.shareImage.childImageSharp.fixed.src;
 
@@ -69,14 +68,6 @@ export const BlogPostPageQuery = graphql`
       html
       htmlAst
       fields {
-        socialCard {
-          childImageSharp {
-            fixed(width: 1440, height: 760) {
-              src
-            }
-          }
-        }
-
         readingTime {
           minutes
         }

src/templates/career-details.tsx

@@ -23,7 +23,7 @@ interface CareerPageProps {
 const CareerPage: React.FC<CareerPageProps> = (props): JSX.Element => {
   const { pageContext } = props;
   const position = props.data.syPersonioJob;
-  const socialCardPath = position.fields.socialCard.childImageSharp.fixed.src;
+  const socialCardPath = position.socialCard.childImageSharp.fixed.src;
   const { t } = useTranslation();
 
   return (
@@ -52,12 +52,10 @@ const CareerPage: React.FC<CareerPageProps> = (props): JSX.Element => {
 export const CareerDetailsPageQuery = graphql`
   query ($language: String!, $id: String!) {
     syPersonioJob(id: { eq: $id }) {
-      fields {
-        socialCard {
-          childImageSharp {
-            fixed(width: 1440, height: 760) {
-              src
-            }
+      socialCard {
+        childImageSharp {
+          fixed(width: 1440, height: 760) {
+            src
           }
         }
       }

src/types.ts

@@ -40,13 +40,11 @@ export interface SyPersonioJob {
   slug: string;
   sections: SyPersonioJobSection[];
 
-  // now owned by the source plugin, added via `onCreateNode`
-  fields: {
-    socialCard: {
-      childImageSharp: {
-        fixed: {
-          src: string;
-        };
+  // added through onCreateNode
+  socialCard: {
+    childImageSharp: {
+      fixed: {
+        src: string;
       };
     };
   };