Query for specific files from GraphCMS Assets using GraphQL

Question

I'm using GraphCMS as my CMS for my GatsbyJS site, and I want to query for a specific image files, which I can then use in a React component.

When using localhost:8000___grapql I'm able to find all my assets using this path:

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

In my my React component file named community.tsx, I'm trying to render the discord image defined in the query, but I cannot seem to get it to work.

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``

What should I type in curley brackets where it currently says?:

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

Answer 1

What you are finding in the localhost:8000/___graphql, are the nodes that Gatsby and GraphQL have created using the valid filesystem/CMS configuration placed in the gatsby-config.js.

Once you set the configuration files like:

// 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
      },
    },
  ],
}

You will be able to:

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

For further details check the docs.

Your data, once the query is done, is inside props.data.queryName. In your case, your need to change it to:

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>
  )
}