Как люди используют gatsby-image в реальном мире?

Question

Я следил за этим руководством https://www.gatsbyjs.org/packages/gatsby-image/, но нормальные люди не могут написать 50 строк кода для добавления изображения:

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => {
  // Set up the array of image data and `media` keys.
  // You can have as many entries as you'd like.
  const sources = [
    data.mobileImage.childImageSharp.fluid,
    {
      ...data.desktopImage.childImageSharp.fluid,
      media: `(min-width: 768px)`,
    },
  ]

  return (
    <div>
      <h1>Hello art-directed gatsby-image</h1>
      <Img fluid={sources} />
    </div>
  )
}

export const query = graphql`
  query {
    mobileImage: file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 1000, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    desktopImage: file(
      relativePath: { eq: "blog/avatars/kyle-mathews-desktop.jpeg" }
    ) {
      childImageSharp {
        fluid(maxWidth: 2000, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

У меня вопрос: как сохранить рассудок и использовать изображения с Гэтсби?

В этом примере много проблем:

• Импорт и использование далеко, в идеале должно быть близко (поэтому, если вы удаляете из html, вам нужно не забыть удалить из graphql)
• Количество шаблонов огромно. Представьте, что вам нужно 2 изображения...
• Нет автозаполнения при импорте изображений. Разработчики действительно вводят полный путь к изображениям? Кажется, это много работы. Переименование тоже выглядит рискованным. (Я использую intellij.)

---

Для всех, кто использует машинописный текст и хочет немного улучшить производительность, фильтруя только изображения:

import {graphql, useStaticQuery} from 'gatsby'
import Img from 'gatsby-image'
import React from 'react'

interface Props {
  // @todo: convert to enum
  relativePath: string;
  alt: string;
}

export const Image: React.FC<Props> = (props) => {
  const {relativePath, alt} = props

  const images: { data: { edges: Array<{ node: { relativePath: string, default: { fluid: any } } }> } } = useStaticQuery(graphql`
    query ImageQuery {
      data: allFile(filter: {sourceInstanceName: {eq:"images"}}) {
        edges {
          node {
            relativePath
            default: childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `)

  const image = images.data.edges.find(n => {
    return n.node.relativePath.includes(relativePath)
  })

  if (!image) {
    throw new Error(`Image not found`)
  }

  return (
    <Img alt={alt} fluid={image.node.default.fluid} />
  )
}

---

Чтобы добавить sourceInstanceName

/**
 * From:
 *  - https://github.com/ChristopherBiscardi/gatsby-mdx/issues/105
 *  - https://github.com/gatsbyjs/gatsby/issues/1634
 */
export const onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const parent = getNode(node.parent)
    if (parent.internal.type === 'File') {
      createNodeField({
        name: `sourceInstanceName`,
        node,
        value: parent.sourceInstanceName,
      })
    }
  }
}

и конфигурация плагина

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: props.imageRootFolder,
        name: 'images',
      },
    },

Answer 1

Я использую универсальный Image составная часть:

import React from "react"
import Img from "gatsby-image"
import { useStaticQuery, graphql } from "gatsby"

export default (props) => {

  const { filename, type = 'default', alt, sizes = '(max-width: 400px) 100px, (max-width: 800px) 200px, 400px' } = props;

  const images = useStaticQuery(graphql`
    query ImageQuery {
      data: allFile {
        edges {
          node {
            relativePath
            default: childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
            square: childImageSharp {
              fluid(maxWidth: 600, maxHeight: 600) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `);

  const image = images.data.edges.find(n => {
    return n.node.relativePath.includes(filename);
  });

  if (!image) {
    return null;
  }

  return (
    <Img alt={alt} fluid={{
      ...image.node[type].fluid,
      sizes: sizes,
    }} />
  )
}

Затем я передаю имя файла и замещающий текст (и, возможно, тип и размеры).

 <Image alt="Gravity does not apply to cats" type="square" filename="cat-defies-gravity.png" />

Я согласен, что это обходной путь, пока мы не получим что-то вроде Querying 2.0. Если вы прочтете эту страницу, вы увидите именно свою проблему в качестве примера.