Get help on Discord

Issue with schema update not reflecting on front end in GatsbyJS

10 replies
Last updated: Oct 14, 2021
Hi all, I am building a main navigation and wanted to have the option to have different styled links. I have updated the schema with a type of "string" , named "style" . When I inspect the json in the admin, I can see that field exist, but when looking at the data on the front end, it does not show up? I am using GatsbyJS for the frontend
AI Update

This is a common caching issue with Gatsby! When you add new fields to your Sanity schema, Gatsby doesn't automatically pick them up because it caches the GraphQL schema and data from previous builds.

Here's what you need to do:

1. Run gatsby clean

This is the most important step. Run this command in your Gatsby project directory:

gatsby clean

This clears Gatsby's cache and the .cache directory, forcing it to rebuild the GraphQL schema from scratch on the next build.

2. Redeploy your GraphQL API (if using GraphQL)

If you're using gatsby-source-sanity with the GraphQL API, you need to redeploy your schema:

cd your-sanity-studio
sanity graphql deploy

This updates the GraphQL API that Gatsby queries to include your new field definitions.

3. Restart your Gatsby development server

After cleaning the cache, restart your dev server:

gatsby develop

Why this happens:

The gatsby-source-sanity plugin fetches your Sanity GraphQL schema definitions and streams documents into Gatsby's in-memory datastore. When you add new fields, Gatsby's cached schema doesn't know about them until you clean the cache and rebuild.

Additional troubleshooting:

  • Make sure the style field is actually populated in your Sanity documents (not just in the schema)
  • If you're using overlayDrafts: true in your gatsby-config.js, ensure you have a read token configured to see draft content
  • Check that your GraphQL queries in Gatsby actually include the new style field

After running gatsby clean and restarting, your new style field should appear in your Gatsby queries!

export default {
title: "Call to action",
name: "cta",
type: "object",
fieldsets: [
{
title: "Link",
name: "link",
description: "Only the first value of these will be used",
},
],
fields: [
{
title: "Title",
name: "title",
type: "string",
},
{
title: "Landing page",
name: "landingPageRoute",
type: "reference",
fieldset: "link",
to: [{ type: "route" }],
},
{
title: "Path",
name: "route",
fieldset: "link",
description: "Example: /blog",
type: "string",
},
{
title: "External link",
name: "link",
type: "string",
description: "Example:
https://website.com ", fieldset: "link",
},
{
title: "Style",
name: "style",
description: "What style of link ",
type: "string",
options: {
layout: "dropdown",
list: ["button", "link"],
},
},
{
title: "Kind",
name: "kind",
type: "string",
options: {
layout: "radio",
list: ["button", "link"],
},
},
],
preview: {
select: {
title: "title",
landingPage: "landingPageRoute.slug.current",
route: "route",
link: "link",
},
prepare({ title, landingPage, route, link }) {

_let_ subtitle = "Not set";
if (landingPage) {
subtitle = `Route: /${landingPage}`;
}
if (route) {
subtitle = `Route: ${route}`;
}
if (link) {
subtitle = `External: ${link}`;
}

_return_ {
title,
subtitle,
};
},
},
};
also, tried deploying graphql , but still no luck
Hey Kyle, I know you mentioned deploying graphql, but does that mean you redeployed after you made the changes to your schema?
first , I had made the changes to my local, verified in the Studio the schema was update, but was not updated on the front end. then deployed graphql ,which them prompted me with the scheme changes and was successful
it weird, cause I have made some small changes to this CTA schema and it did update in the past, just the "style" one is not coming though?
Got it. And what does your query look like on your frontend?
brb, got to jump on a call
back, annnnd I didn't realize the Nav items query was broken out into a fragment, added "style" and all is good, Thanks!
Awesome! Glad you got it sorted out!
Awesome! Glad you got it sorted out!

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?