使用GraphQL从GraphCMS Assets查询特定文件

Question

我使用GraphCMS作为我的GatsbyJS站点的内容管理系统，我想查询特定的图像文件，然后我可以在React组件中使用它。

使用localhost:8000___grapql时，我可以使用以下路径找到我的所有资产：

{
  discord: allGraphCmsAsset(filter: {fileName: {eq: "discord_community.png"}}) {
    edges {
      node {
        localFile { 
          childImageSharp {
            fluid(maxWidth: 600) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}

在我的名为community.tsx的React组件文件中，我试图呈现查询中定义的不一致图像，但似乎无法使其工作。

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
import styled from "styled-components"

export default function CommunityPage({ allGraphCmsAsset }) {
  return (
    <Wrapper>
      <Img
          fluid={allGraphCmsAsset.discord.localFile.childImageSharp.fluid}
          fadeIn={false}
      />
    </Wrapper>
  )
}

export const imageQuery = graphql`
{
  discord: allGraphCmsAsset(filter: {fileName: {eq: "discord_community.png"}}) {
    edges {
      node {
        localFile { 
          childImageSharp {
            fluid(maxWidth: 600) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}`

const Wrapper = styled.div``

我应该在当前显示的curley括号中键入什么内容？：

fluid={allGraphCmsAsset.discord.localFile.childImageSharp.fluid}

Answer 1

您在localhost:8000/___graphql中找到的是Gatsby和GraphQL使用gatsby-config.js中的有效文件系统/CMS配置创建的节点。

一旦设置了如下配置文件：

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-graphcms',
      options: {
        endpoint: process.env.GRAPHCMS_ENDPOINT,
        downloadLocalImages: true, // recommended to safe build times and improve SEO
      },
    },
  ],
}

您将能够：

{
  allGraphCmsAsset {
    nodes {
      localFile {
        childImageSharp {
          fixed {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  }
}

有关更多详细信息，请查看docs。

查询完成后，您的数据就在props.data.queryName中。在您的情况下，您需要将其更改为：

export default function CommunityPage({ data }) {

console.log (data.discord) //<-- Here's your data 
  return (
    <Wrapper>
      <Img
          fluid={data.discord.nodes[0].localFile.childImageSharp.fluid}
          fadeIn={false}
      />
    </Wrapper>
  )
}