Cannot query field “image” on type “Query” GraphCMS with Gatsbyjs

Good Evening, I am new to Gatsby and Graphql. I am experimenting with the CMS system, but I have no idea what this error means. Any help would be appreciated. The marked below is the error that I have been getting. I do have the folder graphcms-fragmetns in my root folder. I have followed the documentation that’s out there, but it hasn’t worked.

Cannot query field "image" on type "Query" Graphiql also is only showing queries for my local machine. I am not sure what I am missing.

index.js

import * as React from "react"
import {useState} from "react";
import {useStaticQuery, graphql} from "gatsby"





const IndexPage = () => {
  const [query, setQuery] = useState([{}])

   const testQuery =  graphql`
  {
    image {
      images{
        id
      }
    }
  }
  
    `
   const test1 = useStaticQuery(testQuery);
   console.log(test1);

  return (
    <main style={pageStyles}>
      <title>Home Page</title>
      <h1 style={headingStyles}>
        Congratulations
        <br />
        <span style={headingAccentStyles}>— you just made a Gatsby site! </span>
        <span role="img" aria-label="Party popper emojis">
          🎉🎉🎉
        </span>
      </h1>
      <p style={paragraphStyles}>
        Edit <code style={codeStyles}>src/pages/index.js</code> to see this page
        update in real-time.{" "}
        <span role="img" aria-label="Sunglasses smiley emoji">
          😎
        </span>
      </p>
      <ul style={listStyles}>
        <li style={docLinkStyle}>
          <a
            style={linkStyle}
            href={`${docLink.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
          >
            {docLink.text}
          </a>
        </li>
        {}
      </ul>
      <img
        alt="Gatsby G Logo"
        src="data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm0 2c-3.73 0-6.86 2.55-7.75 6L14 19.75c3.45-.89 6-4.02 6-7.75h-5.25v1.5h3.45a6.37 6.37 0 01-3.89 4.44L6.06 9.69C7 7.31 9.3 5.63 12 5.63c2.13 0 4 1.04 5.18 2.65l1.23-1.06A7.959 7.959 0 0012 4zm-8 8a8 8 0 008 8c.04 0 .09 0-8-8z' fill='%23639'/%3E%3C/svg%3E"
      />
    </main>
  )
}

export default IndexPage

gatsby-config

module.exports = {
  siteMetadata: {
    siteUrl: "https://www.yourdomain.tld",
    title: "Playground",
  },
  plugins: [
    "gatsby-plugin-sass",
    "gatsby-plugin-image",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sitemap",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
      __key: "images",
    },
    {
      resolve: 'gatsby-source-graphcms',
      options: {
        typeName: 'GraphCMS',
        fieldName: 'image',
        endpoint: "URL endpoint,
      }
    }
  ],
};

Answer

Cannot query field “image” on type “Query”

This basically means that you don’t have an image node in your query so you can’t use the GraphQL query.

According to the documentation, the way of using images should be a query like:

{
  allGraphCmsAsset {
    nodes {
      gatsbyImageData(layout: FULL_WIDTH)
    }
  }
}

In this case, allGraphCmsAsset is the main node created by gatsby-source-graphcms plugin where you have your images stored. If you test it in the GraphiQL playground (localhost:8000/___graphql) you’ll see all the available nodes to query so give it a try and prepare your query there.

In your case, since you are customizing a little bit your node, I think your query should look like this:

{
  allGraphCmsAsset {
    nodes {
      image {
         gatsbyImageData(layout: FULL_WIDTH)
      }
    }
  }
}

But as I said, it will be strictly related to your GraphCMS fields, customization, and implementation. In other words, to get your nodes and data, use the GraphiQL playground. Build it there.

Your final structure should look like this:

import React from “react” import { graphql } from “gatsby”

function IndexPage({ data }) {
  return (
    <ul>
      {data.allGraphCmsAsset.nodes.map(image=> (
        <li key={image.id}>
          <GatsbyImage image={image.gatsbyImageData} alt="" />
        </li>
      ))}
    </ul>
  )
}

export const pageQuery = graphql`
  query IndexPageQuery {
    allGraphCmsAsset {
      nodes {
        image { 
           id
           gatsbyImageData(layout: FULL_WIDTH)
        }
      }
    }
  }
`

export default IndexPage

Check how pageQuery is outside the IndexPage component, unlike your provided snippet.

Useful resources:

• https://www.gatsbyjs.com/docs/sourcing-from-graphcms/