Gatsby useStaticQuery to create custom hook for returning an image src path

gatsby-useImgSrc-hook.tsx

/**
 * Required plugins: gatsby-source-filesystem and gatsby-plugin-sharp
 *
 * Basic Hook Usage:
 *
 * import useImgSrc from '../utils/useImgSrc';
 *
 * const Image = ({src}) => {
 *    const imgSrc = useImgSrc(src);
 *
 *    return (
 *      <img src={imgSrc} />
 *    )
 * }
 *
 * <Image src="example.png" />
 */

import { graphql, useStaticQuery } from 'gatsby';

interface IImgSharp {
  node: {
    fluid: {
      src: string;
    };
  };
}

const useImgSrc = (img: string) => {
  const { allImageSharp } = useStaticQuery(
    graphql`
      query {
        allImageSharp {
          edges {
            node {
              fluid {
                src
              }
            }
          }
        }
      }
    `,
  );

  const imgSrc = allImageSharp.edges.filter((image: IImgSharp) => {
    return image.node.fluid.src.includes(img);
  });

  return imgSrc[0].node.fluid.src;
};

export default useImgSrc;