Как мне создать фрагмент для Gatsby StaticQuery Hook?

Question

Я пытаюсь создать фрагмент для хука StaticQuery в Gatsby JS, но я не уверен, как его создать. Я попытался создать другую переменную фрагмента, например так:

const fixedImage = graphql`
    fragment fixedImage on File {
        childImageSharp{
            fixed{
                ...GatsbyImageSharpFixed
            }
        }
    }
    `

Но мой запрос все еще не смог найти фрагмент, я также попытался передать его в качестве аргумента, как показано ниже, но безрезультатно.

const data = ({fixedImage}) => useStaticQuery(graphql`
query MyQuery {
  square1: file{
    ...fixedImage
  }
  square2: file{
    ...fixedImage
  }
  square3: file{
    ...fixedImage
  }
  square4: file{
    ...fixedImage
  }
}
`)

Answer 1

Вам необходимо экспортировать фрагмент запроса в компоненте. Не имеет значения, какой компонент, но рекомендуется экспортировать его в связанный компонент (ie. Image.jsx).

Image.jsx:

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

export default ({ image }) => (
  <div>
    <Image fixed={image.childImageSharp.fixed} />
  </div>
)
export const query = graphql`
  fragment fixedImage on File {
        childImageSharp{
            fixed{
                ...GatsbyImageSharpFixed
            }
        }
    }
`

Затем вы можете использовать фрагмент в других компонентах.

Post.jsx:

import React from "react"
import { graphql } from "gatsby"
import Image from "./Image.jsx"

export default () => {
const data = useStaticQuery(query)
const { square1 } = data

 return (
   <div>
     <Image image={square1} />
   </div>
  )
}

const query = graphql`
    query MyQuery {
        square1: file(absolutePath: { regex: "/square1.(jpeg|jpg|gif|png)/" }) {
            ...fixedImage
        }
    }
`

Подробнее о фрагментах в Гэтсби: https://www.gatsbyjs.org/docs/using-graphql-fragments/

Answer 2

У меня была такая же проблема с Gatsby Image; Я хотел сократить повторение вызова childImageSharp каждый раз. Я решил это, создав фрагмент внутри строки перед запросом, подобным этому:

const data = useStaticQuery(graphql`
    fragment fluidImage on File {
        childImageSharp {
            fluid(maxWidth: 1000) {
              ...GatsbyImageSharpFluid
            }
        }
    }
    query {
      imageOne: file(relativePath: { eq: "img/image1.jpg" }) {
        ...fluidImage
      }
      imageTwo: file(relativePath: { eq: "img/image2.jpg" }) {
        ...fluidImage
      }
      imageThree: file(relativePath: { eq: "img/image3.jpg" }) {
        ...fluidImage
      }
    }
  `);