Skip to content
Get help on Slack

Troubleshooting GraphQL deployment in a Stackbit/Gatsby project with Sanity

11 replies
Last updated: Aug 22, 2020
I am trying to Deploy GraphQL inside a Sanity/Stackbit/Gatsby project. Running into
Error: Encountered anonymous inline object "header" for field/type "Config". To use this field with GraphQL you will need to create a top-level schema type for it. See <https://docs.sanity.io/help/schema-lift-anonymous-object-type>
Aug 21, 2020, 2:15 AM
This what the code looks like inside the source of the error
Aug 21, 2020, 2:21 AM
Aug 21, 2020, 2:23 AM
I am hitting this struggle while in process of trying to set up Live Preview with Gatsby; I would have assumed a GraphQL was already deployed, but none has been yet for this project
Aug 21, 2020, 2:24 AM
Stackbit probably did something weird; I am a borderline amateur, and while I have read the recommended documentation , delving this deep into already established code in order to "lift anonymous object types" is out of my range
Aug 21, 2020, 2:27 AM
I really need the Live Preview; designing Content without it has been quite difficult. So if anyone can help/guide me in this process to get the GraphQL deployed, or move me in an alternative route, it would be awesome 🙏🤖
Aug 21, 2020, 2:29 AM
Hi, Matt!
You need to define the header object as a global schema type. Create 
header.js


export default {
  "type": "object",
  "name": "header",
  "title": "Header Configuration",
  "validation": null,
  "fields": [
    {
      "type": "string",
      "name": "title",
      "title": "Header Title",
      "description": "The title displayed in the header if no logo image added.",
      "validation": null
    },
    {
      "type": "image",
      "name": "logo_img",
      "title": "Logo",
      "description": "The logo image displayed in the header.",
      "validation": null
    },
    {
      "type": "boolean",
      "name": "has_nav",
      "title": "Enable Navigation Menu",
      "description": "Display the navigation menu bar in the header.",
      "initialValue": true,
      "validation": null
    },
    {
      "type": "array",
      "name": "actions",
      "title": "Action Buttons",
      "description": "The action buttons displayed in the menu.",
      "validation": null,
      "of": [{"type": "action"}]
    }
  ]
}

Aug 21, 2020, 2:56 AM
Import 
header.js
in 
schema.js
and use it in your 
config
document like this
{
  "type": "header",
  "name": "header",
  "title": "Header Config",
}
Aug 21, 2020, 2:59 AM
Thank you for helping
user A
🙇‍♂️
Aug 21, 2020, 4:09 AM
Ok, about to test it out!
Aug 22, 2020, 4:28 PM
Wow Yes - had to repeat the process you described for other anon object types, but I really got the hang of it and feel I understand working with schemas more intimately. Thank you for whittling it down
user A
Aug 22, 2020, 7:33 PM
And to add a final piece necessary piece to your instructions, for anyone who has a similar problem, in your Schema.js file, after importing the newly created non-anon object, make sure to add it to the list of schema types at the end of the file also
Aug 22, 2020, 7:35 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?