如何使用gatsby

在GraphiQL中戳一下应该可以帮助您，尤其是Explorer。尽管请记住，盖茨比片段在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节点，这可能是您实现的，也可能不是。