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

【问题标题】：Query for specific files from GraphCMS Assets using GraphQL使用 GraphQL 从 GraphCMS 资产中查询特定文件
【发布时间】：2021-05-07 14:42:43
【问题描述】：

我正在使用 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}

【问题讨论】：

签入localhost:8000___grapql，如果您可以在allGraphCmsAsset 上使用一些过滤器，例如allGraphCmsAsset(where:...) {
酷，这似乎是等式的一部分。然后如何使用该查询将我的图像放入我的反应组件中？
在操场上测试它并在pageQuery中使用？
我在原帖中更新了我的问题。感谢您的帮助。
你必须使用pageQuery 常量名！！ ...您可以在返回之前在组件中console.log( allGraphCmsAsset ) ...检查它的结构（非常基本的js问题）

标签： graphql gatsby gatsby-image

【解决方案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>
  )
}

【讨论】：

感谢您的信息。我现在已经编辑了原来的帖子。当我尝试渲染图像时，也许您可以帮助我们解决我做错的事情？
您的数据在props.data.discord 中。在您的情况下，由于您正在解构，data.discord
更改它时，它会在 localhost 上给我以下错误消息：TypeError: can't access property 0, data.discord.nodes is undefined
嗯，这就是为什么上面有console.log，是为了让你得到正确的嵌套对象