Cannot query field <ModelName> on type "builder"

What are you trying to accomplish
I was following this documentation in order for me to get a custom section model.

Screenshots or video link

Im getting this when I try to query the model I created in builder editor.

Code stack you are integrating Builder with

Reproducible code example

this is exactly how my component is setup.

import React from 'react';
import { graphql } from 'gatsby';
import { BuilderComponent } from '';

const SiteWideBanner = (props) => {
  const banner =[0];
  const content = banner ? banner.content: {};

  return <BuilderComponent
    model="banner" />

export default SiteWideBanner;      

export const bannerQuery = graphql`
  query {
    allBuilderModels {
      banner(target: { urlPath: "/" }) {

I do get results for above query when I execute in GraphQL explorer. But Im not sure why I am getting this above mentioned error. I have tried both model names. oneBanner and banner
can someone point me what I am doing wrong here?

Hi @shehan,

Can you try following the suggestions in this forum post? Let me know if this resolves the error you’re seeing.

Hi @maddy ,

Thank you for the response. I have tried those but still I get the error. Here is the model setup I have

After couple of cleaning and restarting finally I was able to build the project.