feat(gatsby-plugin-image): Add resolver helper and improve custom hook

[ascorbic]

This PR adds a getGatsbyImageResolver helper, which is designed to be used with createResolvers. It creates the full field config, with the required args defined. You pass it the actual resolver function. This is easier to use than the current helper, which is based on the old sharp and Contentful resolvers which use the deprecated setFieldsOnGraphQLNodeType API. Usage for the new helper is:

import { getGatsbyImageResolver } from "gatsby-plugin-image/graphql-utils"

const resolveGatsbyImageData = async (image, options) => {
  const { filename, ...sourceMetadata } = getBasicImageProps(image, options)

  const generateImageSource = (imageName, width, height, format) => {
    const src = `https://myexamplehost.com/${width}x${height}/${imageName}.${format}`
    return { src, width, height, format }
  }

  return generateImageData({
    ...options,
    pluginName: `gatsby-source-myexample`,
    sourceMetadata,
    filename,
    generateImageSource,
  })
}

exports.createResolvers = ({ createResolvers }) => {
  createResolvers({
    ProductImage: {
      gatsbyImageData: getGatsbyImageResolver(resolveGatsbyImageData),
    },
  })
}

This PR also simplifies the useGatsbyImage hook, which is a helper to allow image hosts with URL APIs to create custom hooks and components supporting gatsby-plugin-image. The main requirement is for a URL builder function which can generate an image URL when given a base URL and dimensions.

The following is an example using the imgix rendering API. It defines a useImgix hook that returns an object which can be passed to <GatsbyImage>:

import { useGatsbyImage } from "gatsby-plugin-image";

function urlBuilder({ baseUrl, width, height, options }) {
    const props = {
        fit: "min",
        auto: "format",
        ...options,
        w: width,
        h: height,
    };
    const params = new URLSearchParams(Object.entries(props).map(([key, val]) => [key, val.toString()]));
    return `${baseUrl}?${params.toString()}`;
}

export function useImgix(props) {
    return useGatsbyImage({ pluginName: "useImgix", ...props, urlBuilder });
}

This can then be used like this:

export function Hat() {
  const image = useImgix({
    baseUrl: "https://assets.imgix.net/examples/hat.jpg",
    layout: "fullWidth",
    aspectRatio: 16 / 9,
  });

  return <GatsbyImage image={image} alt="Hat" />
}

It can also be used to create custom image components:

export function ImgixImage({
  src,
  width,
  height,
  layout,
  sourceWidth,
  sourceHeight,
  options,
  aspectRatio,
  backgroundColor,
  placeholderURL,
  pluginName = "ImgixImage",
  ...props
}) {
  const image = useImgix({
    baseUrl: src,
    width,
    height,
    layout,
    sourceWidth,
    sourceHeight,
    options,
    aspectRatio,
    backgroundColor,
    placeholderURL,
    pluginName,
  });
  return <GatsbyImage image={image} {...props} />;
};

...which can be used like this:

        <ImgixImage
          src="https://images.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg"
          layout="constrained"
          width={800}
          height={600}
          alt="Mountains"
        />

[laurieontech]

Looks good to me. Left one recommendation. The text is lifted from stuff we've already reviewed, so assuming that's boilerplate.

[laurieontech]

LGTM