Get help on Discord

GraphQL query works in Sanity playground but fails in Gatsby component

3 replies
Last updated: Nov 29, 2025
Hi, this might be a very very basic question I apologize. I’ve made a new document type (Project) and added 4 projects to the CMS. When I run the following query on the API playground (at the API link), it works fine and I get all the data I need. 

 query {
      allProject {
        title
        subtitle
        description
        mainImage {
          asset {
            url
          }
        }
        tech
        url
        dates 
      }
    }
But, when I run this same query in my Gatsby component,

const {data} =useStaticQuery(graphql`
    query getProjects {
      allProject {
        title
        subtitle
        description
        mainImage {
          asset {
            url
          }
        }
        tech
        url
        dates 
      }
    }
  `);
I get this error:

“There was an error in your GraphQL query:

Cannot query field “allProject” on type “Query”.

If you don’t expect “allProject” to exist on the type “Query” it is most likely a typo.
However, if you expect “allProject” to exist there are a couple of solutions to common problems:”
This is the code in my Gatsby component. I have made sure to deploy the API and reload my devs server.I am new to development, and I got this structure from other people’s code on the internet. What might be going wrong? I’ve tried to read Sanity’s documentation but I couldn’t really make sense of it.
AI Update

No worries, this is a common issue when setting up Sanity with Gatsby! The problem is that your GraphQL query works in Sanity's API playground, but Gatsby has its own separate GraphQL layer.

Here's what's happening: Sanity has its own GraphQL API (what you're testing in the playground), but Gatsby creates a completely different GraphQL schema by pulling data from various sources. To get Sanity data into Gatsby's GraphQL layer, you need to use the gatsby-source-sanity plugin.

Here's how to fix it:

  1. Install the plugin (if you haven't already):
npm install gatsby-source-sanity
  1. Configure it in gatsby-config.js:
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-sanity',
      options: {
        projectId: 'your-project-id',
        dataset: 'production', // or your dataset name
        // Optional: for draft preview
        token: process.env.SANITY_TOKEN,
        watchMode: true, // enables real-time updates in dev
      },
    },
  ],
}
  1. Deploy your GraphQL API from your Sanity studio folder:
sanity graphql deploy
  1. Restart your Gatsby dev server (important!):
gatsby clean
gatsby develop
  1. Update your query - Gatsby prefixes Sanity types with Sanity:
const {data} = useStaticQuery(graphql`
  query getProjects {
    allSanityProject {
      nodes {
        title
        subtitle
        description
        mainImage {
          asset {
            url
          }
        }
        tech
        url
        dates
      }
    }
  }
`);

Notice two changes:

  • allProject becomes allSanityProject (Gatsby adds the "Sanity" prefix)
  • You need to wrap your fields in nodes { } for Gatsby's data structure

After these steps, you should be able to access your projects data via data.allSanityProject.nodes in your component. The gatsby-source-sanity plugin is what bridges Sanity's content with Gatsby's GraphQL layer - that's why the query works in Sanity's playground but not directly in Gatsby!

Show original thread
3 replies

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?