Support gatsby image cdn

README.md

@@ -103,7 +103,7 @@ Developed based on:
 
 ## Points to note
 
-- `gatsbyNodeType` is a reserved key for API responses. If you have a Payload field with this name, it will be overwritten.
+- `gatsbyNodeType` and `gatsbyImageCdn` are reserved keys for API responses. If you have a Payload field with this name, it will be overwritten. Issue noted and this should be removed after the following issue is resolved: https://github.com/thompsonsj/gatbsy-source-payload-cms/issues/34.
 
 # creating-source-plugin-tutorial
 

plugin/src/create-schema-customization.ts

@@ -14,18 +14,111 @@ import type { IPluginOptionsInternal } from "./types"
  * @see https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/#createSchemaCustomization
  */
 export const createSchemaCustomization: GatsbyNode[`createSchemaCustomization`] = (
-  { actions },
+  { actions, schema },
   pluginOptions: IPluginOptionsInternal
 ) => {
   const { createTypes } = actions
 
   const schemaCustomizations = pluginOptions.schemaCustomizations || ``
 
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const PayloadEvents_Layout = schema.buildUnionType({
+    name: `PayloadEvents_Layout`,
+    types: [
+      `Anchor`,
+      `Hero`,
+      `HeroVideo`,
+      `ContentMultiCol`,
+      `HubspotFormEmbed`,
+      `ImageText`,
+      `LogoList`,
+      `TextItems`,
+      `Text`,
+      `List`,
+      `Video`,
+      `Container`,
+    ],
+    resolveType: (value) => {
+      // return correct type depending on incoming value, e.g.
+      if (value.blockType === `anchor`) {
+        return `Anchor`
+      }
+      if (value.blockType === `hero`) {
+        return `Hero`
+      }
+      if (value.blockType === `heroVideo`) {
+        return `HeroVideo`
+      }
+      if (value.blockType === `contentMultiCol`) {
+        return `ContentMultiCol`
+      }
+      if (value.blockType === `hubspotFormEmbed`) {
+        return `HubspotFormEmbed`
+      }
+      if (value.blockType === `imageText`) {
+        return `ImageText`
+      }
+      if (value.blockType === `logoList`) {
+        return `LogoList`
+      }
+      if (value.blockType === `textItems`) {
+        return `TextItems`
+      }
+      if (value.blockType === `text`) {
+        return `Text`
+      }
+      if (value.blockType === `list`) {
+        return `List`
+      }
+      if (value.blockType === `video`) {
+        return `Video`
+      }
+      if (value.blockType === `container`) {
+        return `Container`
+      }
+      throw `No Payload CMS block type defined`
+    },
+  })
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const LogoList_Logos = schema.buildUnionType({
+    name: `LogoList_Logos`,
+    types: [`Logo`],
+    resolveType: () => {
+      return `Logo`
+    },
+  })
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const TextItems_Items = schema.buildUnionType({
+    name: `TextItems_Items`,
+    types: [`TextItem`],
+    resolveType: () => {
+      return `TextItem`
+    },
+  })
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const TextItem_Image = schema.buildUnionType({
+    name: `TextItem_Image`,
+    types: [`Headshot`, `MarketingSiteImage`],
+    resolveType: (value) => {
+      if (value.url.includes(`headshot`)) {
+        return `Headshot`
+      }
+      return `MarketingSiteImage`
+    },
+  })
+
   /**
    * You most often will use SDL syntax to define your data types. However, you can also use type builders for more advanced use cases
    * @see https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization/#gatsby-type-builders
    */
   if (schemaCustomizations) {
     createTypes(schemaCustomizations)
   }
+  createTypes([PayloadEvents_Layout])
+  createTypes([LogoList_Logos])
+  createTypes([TextItems_Items])
+  createTypes([TextItem_Image])
 }

plugin/src/fetch.ts

@@ -19,6 +19,7 @@ export type CollectionOptions = {
   locales?: Array<string>
   params?: { [key: string]: unknown }
   limit?: number
+  imageCdn?: string
 }
 
 export const fetchEntity = async (query: CollectionOptions, context) => {
@@ -71,6 +72,9 @@ export const fetchEntity = async (query: CollectionOptions, context) => {
             data: localizationResponse,
             locale,
             gatsbyNodeType: query.type,
+            ...(query.imageCdn && {
+              gatsbyImageCdn: query.imageCdn,
+            }),
           },
           context
         )
@@ -88,6 +92,9 @@ export const fetchEntity = async (query: CollectionOptions, context) => {
           {
             data,
             gatsbyNodeType: query.type,
+            ...(query.imageCdn && {
+              gatsbyImageCdn: query.imageCdn,
+            }),
           },
           context
         ),
@@ -186,6 +193,9 @@ export const fetchEntities = async (query: CollectionOptions, context) => {
                 data: entry,
                 gatsbyNodeType: query.type,
                 locale,
+                ...(query.imageCdn && {
+                  gatsbyImageCdn: query.imageCdn,
+                }),
               },
               context
             )
@@ -227,6 +237,9 @@ export const fetchEntities = async (query: CollectionOptions, context) => {
             {
               data: entry,
               gatsbyNodeType: query.type,
+              ...(query.imageCdn && {
+                gatsbyImageCdn: query.imageCdn,
+              }),
             },
             context
           )

plugin/src/format-entity.ts

@@ -4,13 +4,15 @@ interface IFormatEntry {
   data: { [key: string]: unknown }
   locale?: string
   gatsbyNodeType: string
+  gatsbyImageCdn: string
 }
 
-export const formatEntity = ({ data, locale, gatsbyNodeType }: IFormatEntry, context?: any) => {
+export const formatEntity = ({ data, locale, gatsbyNodeType, gatsbyImageCdn }: IFormatEntry, context?: any) => {
   const res = {
     ...data,
     gatsbyNodeType,
     ...(locale && { locale: locale }),
+    ...(gatsbyImageCdn && { gatsbyImageCdn: gatsbyImageCdn }),
   }
   const transformedRes: { [key: string]: any } = {}
   Object.keys(res).forEach((value) => {

plugin/src/plugin-options-schema.ts

@@ -23,6 +23,8 @@ export const pluginOptionsSchema: GatsbyNode["pluginOptionsSchema"] = ({ Joi }):
           params: Joi.object(),
           /** Override limit in query params and disable paginated query */
           limit: Joi.number(),
+          /** Create image CDN nodes for upload collections. Set as `original` to use original image, or use a Payload imageSize name. See https://payloadcms.com/docs/upload/overview. */
+          imageCdn: Joi.string(),
         })
       )
     ),

plugin/src/source-nodes.ts

@@ -7,6 +7,7 @@ import { fetchEntity, fetchEntities } from "./fetch"
 import { isString } from "./utils"
 import type { CollectionOptions } from "./fetch"
 import { gatsbyNodeTypeName } from "./utils"
+import { get, toInteger } from "lodash"
 
 let isFirstSource = true
 const pluginName = `gatsby-source-payload-cms`
@@ -212,10 +213,13 @@ export function nodeBuilder({ gatsbyApi, input }: INodeBuilderArgs) {
   const id = gatsbyApi.createNodeId(idFragments.join(`-`))
   const extraData: Record<string, unknown> = {}
 
-  if (input.type === `Post`) {
-    // const assetId = createAssetNode(gatsbyApi, input.data.image)
+  if (get(input, `data.gatsbyImageCdn`, ``) !== ``) {
+    // && get(input, `data.mimeType`, ``) !== `image/svg+xml`
+    // const assetId = createAssetNode(gatsbyApi, input)
     // This sets the autogenerated Node ID onto the "image" key of the Post node. Then the @link directive in the schema will work.
     // extraData.image = assetId
+    // link images based on url
+    createAssetNode(gatsbyApi, input.data)
   }
 
   const node = {
@@ -249,7 +253,7 @@ export function nodeBuilder({ gatsbyApi, input }: INodeBuilderArgs) {
 
 export function createAssetNode(gatsbyApi: SourceNodesArgs, data: any) {
   const id = gatsbyApi.createNodeId(`${NODE_TYPES.Asset}-${data.url}`)
-
+console.log(`Creating asset noide with width: ${toInteger(data.width)} and height: ${toInteger(data.height)}`)
   /**
    * For Image CDN and the "RemoteFile" interface, these fields are required:
    * - url
@@ -262,20 +266,15 @@ export function createAssetNode(gatsbyApi: SourceNodesArgs, data: any) {
   const assetNode = {
     id,
     url: data.url,
-    /**
-     * Don't hardcode the "mimeType" field, it has to match the input image. If you don't have that information, use:
-     * @see https://github.com/nodeca/probe-image-size
-     * For the sake of this demo, it can be hardcoded since all images are JPGs
-     */
-    mimeType: `image/jpg`,
+    mimeType: data.mimeType,
     filename: data.url,
     /**
      * If you don't know the width and height of the image, use: https://github.com/nodeca/probe-image-size
      */
-    width: data.width,
-    height: data.height,
+    width: toInteger(data.width),
+    height: toInteger(data.height),
     placeholderUrl: `${data.url}&w=%width%&h=%height%`,
-    alt: data.alt,
+    alt: data.alt || ``,
     parent: null,
     children: [],
     internal: {

site/gatsby-config.ts

@@ -110,6 +110,10 @@ const config: GatsbyConfig = {
             slug: `logos`,
             ...commonParams,
           },
+          {
+            slug: `marketing-site-images`,
+            imageCdn: `desktop`,
+          },
         ],
         globalTypes: [
           { slug: `customers`, locales: payloadLocales, ...globalParams },