使用 GraphQL 从 GraphCMS 资产查询特定文件

Question

我使用 GraphCMS 作为我的 GatsbyJS 网站的 CMS，我想查询特定的图像文件，然后我可以在 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``

我应该在当前显示的括号中输入什么？：

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

Answer 1

您在 localhost:8000/___graphql 中找到的是 Gatsby 和 GraphQL 使用位于 gatsby-config.js.

中的有效 filesystem/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>
  )
}

使用 GraphQL 从 GraphCMS 资产查询特定文件

Query for specific files from GraphCMS Assets using GraphQL

graphql

gatsby

gatsby-image