Как мне запросить gatsby-изображение?

Question

Я пытаюсь запросить один тип prismi c для отображения фотографий с помощью gatsby-image. После того, как я возился с GraphiQL, я вижу URL-адрес изображения, но я не уверен, как подключить его к gatsby-image. Любой совет?

  <Layout 
    location={`home`}
    image={data.prismic._allDocuments.edges.node.hero_image.childImageSharp.fluid}
  >

Answer 1

Каждый раз, когда вы видите префикс all в GraphQL, вы должны предполагать, что он вернет массив вещей.

В GraphQL мы можем видеть, что _allDocuments.edges возвращает массив из edges. Если мы хотим отобразить все в этом массиве, нам нужно отобразить его.

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

// ./pages/index.js

import React from "react"
import Layout from "../components/layout"


const IndexPage = ({data}) => {
  return (
  <Layout>
    <ul>
      {data.allFile.edges.map((edge) => (
        <li>{edge.node.name}</li>
      ))}
    </ul>
  </Layout>
)}

export default IndexPage


export const query = graphql`
  query HomePageQuery {
    allFile(filter: {relativePath: {regex: "/png$/"}}) {
      edges {
        node {
          id
          name
          relativePath
          publicURL
          childImageSharp {
            fixed(width: 111) { 
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    }
  }
`

---

Тогда вы можете просто import Img from "gatsby-image" и передайте соответствующее запрашиваемое значение фиксированной или текучей опоре <Img /> компонента.

// ./pages/index.js

import React from "react"
import Layout from "../components/layout"
import Img from "gatsby-image"


const IndexPage = ({data}) => {
  return (
  <Layout>
      {data.allFile.edges.map((edge) => (
        <Img fixed={edge.node.childImageSharp.fixed} />
      ))}
  </Layout>
)}

export default IndexPage



export const query = graphql`
  query HomePageQuery {
    allFile(filter: {relativePath: {regex: "/png$/"}}) {
      edges {
        node {
          id
          name
          relativePath
          publicURL
          childImageSharp {
            fixed(width: 111) { 
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    }
  }
`