Помогите вам разобраться в GraphiQL, особенно в Explorer. Хотя помните, что фрагменты Gatsby не будут работать в GraphiQL.
{
allImageSharp {
edges {
node {
id
fluid(maxWidth: 200, maxHeight: 200) {
...GatsbyImageSharpFluid
}
}
}
}
}
Таким образом, вышеприведенное должно быть равнозначно следующему запросу, который будет работать в GraphiQL
{
allImageSharp {
edges {
node {
id
fluid(maxHeight: 200, maxWidth: 200) {
src
srcSet
base64
aspectRatio
originalImg
sizes
}
}
}
}
}
Тогда ваш компонент может использовать этот же запрос и отобразить результаты следующим образом:
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
const imgGridStyle = {
display: 'grid',
gridTemplateColumns: `repeat(auto-fill, 200px)`
};
export default ({ data }) => (
<div>
<h1>Hello gatsby-image</h1>
<div style={imgGridStyle}>
{data.allImageSharp.edges.map(edge =>
<Img fluid={edge.node.fluid} />
)}
</div>
</div>
)
export const query = graphql`
query {
allImageSharp {
edges {
node {
id
fluid(maxWidth: 200, maxHeight: 200) {
...GatsbyImageSharpFluid
}
}
}
}
}
`
Вы можете легко зациклить результирующий массив узлов imageSharp, возвращенных из запроса в data.allImageSharp.edges.map
. Затем передайте свойство fluid
каждого узла в качестве реквизита fluid
gatsby-image
.
Примечание. При этом отображается каждый imageSharp узел в вашем проекте, что может быть, а может и не быть тем, чего вы хотите достичь.