Question

我正在尝试为Gatsby JS中的StaticQuery挂钩创建一个片段，但不确定如何创建它。我尝试创建另一个片段变量，如下所示：

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

您需要将片段查询导出到组件中。哪个组件无关紧要，但是将其导出到相关组件（即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
      }
    }
  `);

如何为Gatsby StaticQuery Hook创建片段？

2 个答案: