Unexpected schema type when SanityImageAsset collection is empty

[arturoalviar]

Description

I am working on a Gridsome Sanity starter that uses this plugin but when I use it with a fresh Sanity studio that has no images, the fieldType in the createSchema function returns false since the SanityImageAsset collection is empty. This is problematic since a number of my queries use localFile as type Image rather than [Image]. Here is a portion of the page query used in my Index.vue file.

<page-query>
  query{
    posts: allSanityPost (sortBy: "publishedAt" limit: 3) {
      edges {
        node {
          ...
          mainImage {
            asset {
              id
              localFile(width: 660, quality: 80)
              url
            }
          }
        }
      }
    }
  }
</page-query>

Environment

// package.json
"dependencies": {
  "@noxify/gridsome-plugin-remote-image": "^1.2.0",
  "@sanity/image-url": "^0.140.19",
  "fontsource-inter": "^3.0.5",
  "gridsome": "^0.7.22",
  "gridsome-plugin-svg": "^0.0.14",
  "gridsome-source-sanity": "^1.0.5",
  "sanity-blocks-vue-component": "^0.1.0"
 }

// gridsome.config.js
{
use: '@noxify/gridsome-plugin-remote-image',
    options: {
    cache: false,
    typeName: 'SanityImageAsset',
    sourceField: 'url',
    targetField: 'localFile',
    targetPath: 'src/assets/sanity/images',
    }
}

Expected result

For localFile to be of type Image not [Images] when SanityImageAsset collection is empty, specifically when a Sanity Studio has been created and no images have been uploaded.

Actual result

Since the collection is empty, the node value in the getFieldType function is null and thus returns false. Because of this, the schemaType in the generateSchemaType becomes [Images] rather than Image.

This is the error displayed:

Module build failed (from ./node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js):
Error: Field "localFile" of type "[Images]" must have a selection of subfields. Did you mean "localFile { ... }"?

GraphQL request:44:13
43 |  id
44 |  localFile(width: 660, quality: 80)
   |  ^
45 |  url

My current solution

I did the following so my starter could query localFile when the allSanityImageAsset collection is empty

// node_modules/@noxify/gridsome-plugin-remote-image/gridsome.server.js

generateSchemaType(addSchemaTypes, fieldType) {
    const schemaType = (fieldType === 'string' || (this.options.schemaType && this.options.schemaType === 'Image')) ? 'Image' : '[Images]'
    ...
}

// gridsome.config.js
{
  use: '@noxify/gridsome-plugin-remote-image',
  options: {
    cache: false,
    typeName: 'SanityImageAsset',      
  + schemaType: 'Image', // optional
    sourceField: 'url',
    targetField: 'localFile',
    targetPath: 'src/assets/sanity/images',
  },
},

Would it make sense to allow the user to configure the schemaType? Or is there a better solution to handling an empty collection?

[noxify]

Hi @arturoalviar ,

thanks for reporting :)

tbh, i haven't tested this use case 🙈 but the suggested changes seems good to me.

If you want, feel free to create a PR with the changes.

Thanks!

Regards, Marcus

[arturoalviar]

I have create the PR. If it is merged, I can also update the documentation if necessary. Thanks for this great plugin!

[noxify]

Hi @arturoalviar ,

i have merged the changes and will publish it soon.

If you have the time to update the documentation, here the link to the files: https://github.com/noxify/webstone.info/tree/master/content/documentation/gridsome-plugin-remote-image

I think it's just the configuration.md and the example-sanity.md.

Thanks!

Regards, Marcus

[noxify]

Version 1.3.0 with your changes is now available :)

[arturoalviar]

Thank you for updating the plugin! I also updated the documentation and created a PR. Thanks again.

[noxify]

Thanks for your contribution. Docu changes are merged.