ButterCMS: Unknown field on RootQueryType - graphql

Question

Hello Im trying to query data into Gatsby from ButterCMS by following the documentation in gatsby-source-buttercms(https://www.gatsbyjs.org/packages/gatsby-source-buttercms/#gatsby-source-buttercms). But got the error "unknown field allButterJob on RootQueryType". I dont know what i did wrong. Someone please take a look at this for me. Here's my gatsby-config.js:
module.exports = {
siteMetadata: {
title: 'Gatsby Default Starter',
},
plugins: [
'gatsby-plugin-react-helmet',
{
resolve: 'gatsby-source-buttercms',
options: {
authToken: '2a926fdcab34e736332a54e24649cedbaf5d0e89',
contentFields: {
keys: [ // Comma delimited list of content field keys.
'job',
'news'
],
test: 0 // Optional. Set to 1 to enable test mode for viewing draft content.
}
}
}
],
}
Here's where i made the query:
import React from 'react'
import Link from 'gatsby-link'
import HeaderlineSection from '../components/headerlineSection'
import FeatureSection from '../components/featureSection'
import TeamSection from '../components/teamSection'
import NewsSection from '../components/newsSection'
import CareerSection from '../components/careerSection'
const IndexPage = ({data}) => (
<div>
<HeaderlineSection />
<FeatureSection />
<TeamSection />
<NewsSection />
<CareerSection />
{console.log(data)}
</div>
)
export default IndexPage
export const query = graphql`
query IndexPageQuery{
allButterJob{
edges{
node{
id
title
}
}
}
}
`

Answer 1

RootQueryType is the top level “item” in your GraphQL schema (Gatsby v1 sets this up). So the relevant part of the error here is “unknown field allButterJob”, which is pretty self explanatory: the field/type you're trying to query doesn't exist at the top level.
It's likely that it's there under a different name. Usually I hop into Graphiql (localhost:8000/___graphql if you're running gatsby develop under the standard port), where you will see something like this in the sidebar (click on the Docs link if it isn't showing):
From here you can click on “Query” to drill down into it. (Note that this screenshot is from a Gatshy v2 app, so instead of RootQueryType it's just listed as Query.) That'll pull up a list of the fields available on Query (or in your case, RootQueryType) that looks something like this:
In this example, allSitePage is a top-level field available to query like this:
query AnythingYouLikeHere {
allSitePage {
edges {
node {
path
}
}
}
}