feat: create node for local assets and webp asset support (#225)

* fix: create node field for assets (#224)

* fix: use createNodeField for remote node

* chore: update demo to use downloadLocalImages

* fix: set File field link

* feat: support webp for assets

* chore: revert download local assets

Author: notrab

gatsby-source-graphcms/src/gatsby-node.js

@@ -281,7 +281,7 @@ export async function createSchemaCustomization(gatsbyApi, pluginOptions) {
   if (downloadLocalImages)
     createTypes(`
       type ${typePrefix}Asset {
-        localFile: File @link
+        localFile: File @link(from: "fields.localFile")
       }
     `)
 
@@ -304,7 +304,13 @@ export async function createSchemaCustomization(gatsbyApi, pluginOptions) {
 }
 
 export async function onCreateNode(
-  { node, actions: { createNode }, createNodeId, getCache, cache },
+  {
+    node,
+    actions: { createNode, createNodeField },
+    createNodeId,
+    getCache,
+    cache,
+  },
   {
     buildMarkdownNodes = false,
     downloadLocalImages = false,
@@ -314,7 +320,9 @@ export async function onCreateNode(
   if (
     downloadLocalImages &&
     node.remoteTypeName === 'Asset' &&
-    node.mimeType.includes('image/')
+    ['image/png', 'image/jpg', 'image/jpeg', 'image/tiff', 'image/webp'].includes(
+      node.mimeType
+    )
   ) {
     try {
       const fileNode = await createRemoteFileNode({
@@ -327,7 +335,9 @@ export async function onCreateNode(
         ...(node.fileName && { name: node.fileName }),
       })
 
-      if (fileNode) node.localFile = fileNode.id
+      if (fileNode) {
+        createNodeField({ node, name: 'localFile', value: fileNode.id })
+      }
     } catch (e) {
       console.error(`[${PLUGIN_NAME}]`, e)
     }
@@ -388,7 +398,7 @@ function makeResolveGatsbyImageData(cache) {
     options
   ) {
     if (
-      !['image/png', 'image/jpg', 'image/jpeg', 'image/tiff'].includes(mimeType)
+      !['image/png', 'image/jpg', 'image/jpeg', 'image/tiff', 'image/webp'].includes(mimeType)
     ) {
       return null
     }
@@ -439,7 +449,7 @@ function makeResolveGatsbyImageData(cache) {
 
 export function createResolvers(
   { createResolvers, cache },
-  { typePrefix = 'GraphCMS_' }
+  { typePrefix = 'GraphCMS_', downloadLocalImages = false }
 ) {
   const args = {
     quality: {
@@ -464,6 +474,14 @@ export function createResolvers(
         type: 'JSON',
       },
     },
+    ...(downloadLocalImages && {
+      File: {
+        gatsbyImageData: {
+          ...getGatsbyImageResolver(makeResolveGatsbyImageData(cache), args),
+          type: 'JSON',
+        },
+      },
+    }),
   }
 
   createResolvers(resolvers)