[gatsby-source-contentful] useContentfulImage doesn't set all options, nor accepts url strings that start with `https:`

[davidpaulsson]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Hi! I found 2 bugs with useContentfulImage.

useContentfulImage doesn't set all options

If I add a few console.log's in the hook, like this

export function useContentfulImage({ image, ...props }) {
  console.log("first", image, { ...props })
  return useMemo(
    () =>
      getImageData({
        baseUrl: image.url,
        sourceWidth: image.width,
        sourceHeight: image.height,
        backgroundColor: null,
        urlBuilder: ({ baseUrl, width, height, options, format }) => {
          console.log("second", baseUrl, width, height, options, format)
          return createUrl(baseUrl, {
            ...options,
            height,
            width,
            toFormat: format,
          })
        },
        pluginName: `gatsby-source-contentful`,
        ...props,
      }),
    [image.url, image.width, image.height, props]
  )
}

and pass this object

const image = { url: `//images.ctfassets.net/foo/bar/baz/image.jpg` }
const result = useContentfulImage({
      image,
      width: 600,
      height: 480,
      toFormat: `avif`,
      quality: 80,
    })

it produces this output:

  console.log
    first { url: '//images.ctfassets.net/foo/bar/baz/image.jpg' } { width: 600, height: 480, toFormat: 'avif', quality: 80 }

      at useContentfulImage (packages/gatsby-source-contentful/src/hooks.js:8:10)

  console.log
    second //images.ctfassets.net/foo/bar/baz/image.jpg 600 480 undefined auto

      at urlBuilder (packages/gatsby-source-contentful/src/hooks.js:16:67)
          at Array.map (<anonymous>)
          at Set.forEach (<anonymous>)

I think this is for all options, I at least have had no luck getting any params appended to my URLs.

useContentfulImage doesn't allow URLs that start with http

If I change this image URL //images.ctfassets.net/foo/bar/baz/image.jpg to https://images.ctfassets.net/foo/bar/baz/image.jpg I get URLs with double "https:https" https:https://images.ctfassets.net/foo/bar/baz/image.jpg?w=600&h=480 returned. Prepending https to strings, only if they start with // should be an easy fix hopefully. Otherwise, I have to result in this madness

const GatsbyContentfulImage = ({ image, alt, ...props }) => {
  const dynamicImage = useContentfulImage({
    image: {
      url: image.replace('https:', ''),
      width: 404,
      height: 404,
      toFormat: 'webp',
      quality: 80,
    },
  });
  return <GatsbyImage alt={alt} image={dynamicImage} {...props} />;
};

I don't know about you guys, but I get URLs with https prepended from Contentful, like so:

{
  "data": {
    "variants": {
      "nodes": [
        {
          "sku": "14151",
          "slug": "/furniture/chairs-and-stools/low-stools/all-wood-stool/14151",
          "thumbnailImage": {
            "url": "https://images.ctfassets.net/v1z1ea1ae17v/45Hgqtrqcw6rePWPWqg9hT/9a97cbbef96bac9ffd009f4ec5e25f7e/14151_All_Wood_Stool_Bobbin_Ash_thumbnail.jpg"
          },
	...

Additional question

How's the hook supposed to work with toFormat: string? Shouldn't it be toFormats: string[] where we could pass an array of formats like ['avif', 'webp', 'jpg']?

Reproduction Link

https://github.com/gatsbyjs/gatsby

Steps to Reproduce

add a few console.log's in the hook like above and a test in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-contentful/src/tests/hooks.js

Expected Result

Output image URL string should include all available options as query params, according to Contentful's Images API

Actual Result

Output image URL string only includes w= and h=

Environment

System:
    OS: macOS 12.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.21.0 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Firefox: 99.0.1
    Safari: 15.4

Config Flags

No response

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[davidpaulsson]

bump

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[davidpaulsson]

Is no one else experiencing this?

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[JoelWakefield]

Hey @davidpaulsson , I've been experiencing the same issues. Were you able to find any workaround or solution?

If not, I'll try to share what I find (if I manage to get it working properly).

[davidpaulsson]

Hi @JoelWakefield

Nope, couldn't get it to work and have been too busy to look into it more. Resorted into a custom hook. But it would be nice if it were to work as intended and have tests for all cases etc

Please share what you've got!