Why GraphQL is not detecting a new field in a JSON object

Question

I'm new in Gatsby Development, in my website I'm using a community theme and modifying it in some things.

My problem started when I modified a JSON file called 'settings.json', where I added a field in the siteConfiguration object, the original file was this:

{"siteConfiguration": {
    "logo": { "text": "chrisley"},
    "navigation": {
      "header": [
        { "label": "About", "url": "/#about" },
        { "label": "Blog", "url": "/blog" },
        { "label": "Features", "url": "/#features" },
        { "label": "Github", "url": "/#github" }
      ],
      "ctaButton": {
        "openNewTab": true,
        "label": "Resume",
        "url": "/resume.pdf"
      },
      "footer": [
        { "label": "Privacy", "url": "/privacy" },
        { "label": "Imprint", "url": "/imprint" }
      ]
    },
    "featureToggles": {
      "useDarkModeAsDefault": false,
      "useDarkModeBasedOnUsersPreference": true,
      "useCookieBar": false
    }
  }
}

And the one where I added the field 'img' inside "logo" is the following:

{"siteConfiguration": {
    "logo": { "text": "chrisley","img":"/content/images/logo-dark.png"},
    "navigation": {
      "header": [
        { "label": "About", "url": "/#about" },
        { "label": "Blog", "url": "/blog" },
        { "label": "Features", "url": "/#features" },
        { "label": "Github", "url": "/#github" }
      ],
      "ctaButton": {
        "openNewTab": true,
        "label": "Resume",
        "url": "/resume.pdf"
      },
      "footer": [
        { "label": "Privacy", "url": "/privacy" },
        { "label": "Imprint", "url": "/imprint" }
      ]
    },
    "featureToggles": {
      "useDarkModeAsDefault": false,
      "useDarkModeBasedOnUsersPreference": true,
      "useCookieBar": false
    }
  }
}

And when I trying to get the img field in GraphQL with this Query:

query SiteConfiguration {
  allSettingsJson: allContentJson {
    settings: nodes {
      siteConfiguration {
        logo {
          text
          img
        }
      }
    }
  }
}

I get the next error:

{
  "errors": [
    {
      "message": "Cannot query field \"img\" on type \"Logo\".",
      "locations": [
        {
          "line": 7,
          "column": 11
        }
      ],
      "extensions": {
        "stack": [
          "GraphQLError: Cannot query field \"img\" on type \"Logo\".",
          "    at Object.Field (/Users/chrisley/Documents/Development/Gatsby/chrisley_dev_website/node_modules/graphql/validation/rules/FieldsOnCorrectTypeRule.js:48:31)",
          "    at Object.enter (/Users/chrisley/Documents/Development/Gatsby/chrisley_dev_website/node_modules/graphql/language/visitor.js:323:29)",
          "    at Object.enter (/Users/chrisley/Documents/Development/Gatsby/chrisley_dev_website/node_modules/graphql/utilities/TypeInfo.js:370:25)",
          "    at visit (/Users/chrisley/Documents/Development/Gatsby/chrisley_dev_website/node_modules/graphql/language/visitor.js:243:26)",
          "    at validate (/Users/chrisley/Documents/Development/Gatsby/chrisley_dev_website/node_modules/graphql/validation/validate.js:69:24)",
          "    at graphqlMiddleware (/Users/chrisley/Documents/Development/Gatsby/chrisley_dev_website/node_modules/express-graphql/index.js:98:38)",
          "    at processTicksAndRejections (node:internal/process/task_queues:95:5)"
        ]
      }
    }
  ]
}

Hope you can help me guys, as always haha 😅

Answer 1

I'll be answering myself because I found the problem hahaha.

The problem was that I was missing updating the Schema of the theme, in particular of this theme was the file gastby/node/createSchemaCustomization.js

So.. after updating the file with this lines:

module.exports = ({ actions }) => {
    actions.createTypes(`
    ...
    type Logo {
        text: String
        img: String
    }
    ...
  `);
};

GraphQL detected my new field 'img' of the 'logo' object.