Skip to content
Unlock seamless workflows and faster delivery with our latest releases – get the details
Get help on Slack

Issue with Gatsby watch mode not refreshing when referenced document is updated in Sanity CMS.

71 replies
Last updated: May 21, 2021
Watch Mode does not refresh when a referenced document is updated in the CMS. Is this the expected behavior?
Stack is, React, Gatsby 3.x

This is schema from my ‘page’ document.

{
      name: "content",
      type: "array",
      title: "Page Sections",
      description: "Add, edit, and reorder sections",      
      of: [        
        {
          type: 'reference',
          to: [            
            { type: 'nav' },
            { type: 'section' },
            { type: 'footer' }
          ]
        }
      ],
    },
nav, section, and footer are all type ‘document’. for example…


export default {
  type: 'document',
  name: 'section',
  title: 'Page Sections',
  fields: [   
    {
      name: 'meta',
      title: 'Section Meta Data',
      type: 'meta'
    },
...
Gatsby Config is set properly


{
      resolve: `gatsby-source-sanity`,
      options: {
        projectId: `asdfasdf`,
        dataset: `template`,
        watchMode: true,
        overlayDrafts: true,        
        token: process.env.MY_SANITY_TOKEN,        
      },
    },
In the CMS / Studio, when you edit one of the fields, you can see Gatsby re-compile in dev mode from the terminal, however, the page does not auto reload. If I click the reload button or do a hard refresh in the browser, the changes do not render.

The only way to get it to render the changes is to go back to the CMS and edit a field on the main “Page” document. Then it refreshes immediately.

Any insight, even if it’s “Hey, this is the expected behavior” would be helpful.
May 17, 2021, 7:19 PM
user M
Does that emoji mean you want me to create a ticket in github for this?
May 17, 2021, 8:37 PM
Great thanks. I’m also looking at the approach in the “Kitchen Sink” repo. I noticed that a reference object is used between the ‘author’ document and the ‘post’ document.
For example: ‘post’ document includes an array of ‘authorReference’ objects that point to an ‘author’ document.

I tried that pattern and still, no joy. However, is there a reason for using a reference object rather than just making the reference directly?
May 17, 2021, 8:46 PM
Great thanks. I’m also looking at the approach in the “Kitchen Sink” repo. I noticed that a reference object is used between the ‘author’ document and the ‘post’ document.
For example: ‘post’ document includes an array of ‘authorReference’ objects that point to an ‘author’ document.

I tried that pattern and still, no joy. However, is there a reason for using a reference object rather than just making the reference directly?
May 17, 2021, 8:46 PM
Hmm, remind me, are there more fields in the 
authorReference
object than just the reference?
May 17, 2021, 9:37 PM
Hmm, remind me, are there more fields in the 
authorReference
object than just the reference?
May 17, 2021, 9:37 PM
_export_ default {

name: 'authorReference',

type: 'object',

title: 'Author reference',

fields: [

{

name: 'author',

type: 'reference',

to: [

{

type: 'author'

}

]

}

],

preview: {

select: {

title: 'author.name',

media: 'author.image.asset'

}

}

}
May 17, 2021, 9:38 PM
I’m not sure on this one. I’ll take a look a the repo and see if I can figure it out.
May 17, 2021, 9:39 PM
The Post document also references another document directly.
May 17, 2021, 9:39 PM
{

name: 'categories',

type: 'array',

title: 'Categories',

of: [

{

type: 'reference',

to: {

type: 'category',

},

},

],

},
May 17, 2021, 9:39 PM
I’m just hoping that I’m missing something silly here. But so far… I’m stumped.
May 17, 2021, 9:40 PM
Ah, it might be so that it can create the custom preview.
May 17, 2021, 9:40 PM
This watch mode issue is my biggest blocker at the moment. So I’m on it until I figure it out. I don’t want to go too far until I have this sorted. Thanks for the help 🙂
May 17, 2021, 9:41 PM
I’ll let you know as soon as I have more info on the watch mode issue!
May 17, 2021, 9:41 PM
I've seen this before also, I think you are correct
user M
that it does not work correctly when nested docs are modified. Maybe file an issue in the sanity github?
May 18, 2021, 4:25 PM
user M
I’m looking for any workaround I can find on this now as well. I’m even thinking about trying to materialize a data change on a field of the main document just to trigger the reload. But that feels like a dirty hack 🙂
May 18, 2021, 9:10 PM
check out the sanity source code and see what is going on in watch mode it's open source!
May 18, 2021, 9:11 PM
I think this is happening in the gatsby-source-sanity plugin. That’s where I’m looking now.
May 18, 2021, 9:12 PM
Somewhere in here…
May 18, 2021, 9:17 PM
if (watchMode) {
May 18, 2021, 9:17 PM
send links to gh code
May 18, 2021, 9:17 PM
May 18, 2021, 9:17 PM
May 18, 2021, 9:19 PM
I was wondering that and… it could also be something in the Sanity Client itself. Line 289 calls ‘client’ which is the sanity client instantiated by the getClient function. So it could get pretty deep for a Sanity Nubie like me.
May 18, 2021, 9:23 PM
Hoping to find a solution soon though, one of the big wins with Sanity over others like contentful is the watchmode edititing. Not the only thing, but it’s pretty big.
May 18, 2021, 9:24 PM
user M
user M
added a ticket this morning. Feel free to add anything I missed:

https://github.com/sanity-io/gatsby-source-sanity/issues/123
May 19, 2021, 4:12 PM
user C
I thought I was either missing something or eating crazy pills! Thanks for filing this. I’m going to add that same boolean to my main page document as well. I wonder if there’s a way to have related documents toggle the boolean for us.
May 19, 2021, 5:26 PM
You are welcome! Let me know if you come up with something!🙌
May 19, 2021, 5:28 PM
user C
user M
Do you think this could be caused by using static queries in serializer components? I’m wondering if querying for all data at the page level and prop drilling it would fix this. It would be unfortunate if that’s the case, but I’m going to try it.
May 19, 2021, 11:21 PM
user M
user C
user M
I’ve added some additional observations to the ticket in GitHub. Hopefully this helps. I’m at a blocker with this at the moment 🙂
May 20, 2021, 2:53 AM
user C
user M
I made some progress on this. I’ll give you a more detailed response shortly, but….
May 20, 2021, 10:49 PM
user C
user M
I made some progress on this. I’ll give you a more detailed response shortly, but….
May 20, 2021, 10:49 PM
It appears that using the _rawQuery is the source of the problem.
May 20, 2021, 10:50 PM
example
May 20, 2021, 10:50 PM
export const PageQuery = graphql`
  fragment PageInfo on SanityPage {
    _id
    _key
    _updatedAt
    _rawContent(resolveReferences: {maxDepth: 10})
    content {
      ... on SanitySection {
        _rawContent(resolveReferences: {maxDepth: 10})
        _rawImage
      }
    }
  }
`
May 20, 2021, 10:50 PM
the _rawContent attribute query will not trigger a data update and therefore will not re-render the page.
However, the explicit query content { … on SanitySection { _rawContent …

That will trigger the update to the data and will trigger the re-render.
May 20, 2021, 10:52 PM
the _rawContent attribute query will not trigger a data update and therefore will not re-render the page.
However, the explicit query content { … on SanitySection { _rawContent …

That will trigger the update to the data and will trigger the re-render.
May 20, 2021, 10:52 PM
I don’t know if this is a feature or a bug 🙂
May 20, 2021, 10:52 PM
I’ve dealt with that before.
It might be because _rawContent is already defined two levels up.
May 20, 2021, 10:53 PM
_rawContent(resolveReferences:

May 20, 2021, 10:53 PM
_rawContent within _rawContent is redundant.
(I just had this explained to me a few weeks ago by someone.)
May 20, 2021, 10:54 PM
Like it might be de-duping even though it’s a child node?
May 20, 2021, 10:54 PM
I could try changing the schema for the section data and see if giving it a different name makes a difference.
May 20, 2021, 10:56 PM
I could try changing the schema for the section data and see if giving it a different name makes a difference.
May 20, 2021, 10:56 PM
I think not using _raw twice is all you have to do
May 20, 2021, 10:56 PM
This is the page schema…{

name: "content",

type: "array",

title: "Page Sections",

description: "Add, edit, and reorder sections",

of: [

{

type: "reference",

to: [

{ type: "nav" },

{ type: 'section' },

],

},

],

},
May 20, 2021, 10:57 PM
Section Schema also has a “content” attribute that will become _rawContent in the GraphQL query.
May 20, 2021, 10:58 PM
From the Section Schema

{

name: "content",

type: "simpleBlockContent",

title: "Section Content",

description: "Section Content defaults to Typography Body1",

},
May 20, 2021, 10:58 PM
I’ll change this and see if it works.
May 20, 2021, 10:58 PM
if _raw is used in the GraphQL anything after that doesn’t need to be _raw (I may be mistaken)
So you should’nt have to change the schema, just take _raw out of the second _rawContent
May 20, 2021, 10:59 PM
I’m going to give it a quick go. one moment.
May 20, 2021, 11:01 PM
While you do that, I’ll be more clear about this, one moment…
May 20, 2021, 11:02 PM
`_export_ const PageQuery = graphql`` 
fragment PageInfo on SanityPage {

_id

_key

_updatedAt


// This is the _raw query that gatsty-source-sanity gives you as a

// convenient way to access all content

_rawContent(resolveReferences: {maxDepth: 10})


// this is me explicitly creating a query for the page sections

content {

... on SanitySection {

// this is the _rawContent convenience query for the section schema

_rawContent(resolveReferences: {maxDepth: 10})

_rawImage

}

}

}
```
May 20, 2021, 11:03 PM
While you do that, I’ll be more clear about this, one moment…
May 20, 2021, 11:02 PM
I was thinking you’d use this instead of that:
May 20, 2021, 11:04 PM
`_export_ const PageQuery = graphql`` 
fragment PageInfo on SanityPage {

_id

_key

_updatedAt


// This is the _raw query

_rawContent(resolveReferences: {maxDepth: 10})

*content* {

... on SanitySection {

content(resolveReferences: {maxDepth: 10})

image
 
}

}

}
```
May 20, 2021, 11:04 PM
(It’ll be a bit on my end. Got something coming up soon that’ll take 45min-1hr)
May 20, 2021, 11:08 PM
What I noticed is that if you use the top level _rawContent query, watch mode will only trigger a re-query of the data and update to the data for the top level parent argument. It won’t watch any referenced documents and trigger a re-query and update to the data.
May 20, 2021, 11:08 PM
(It’ll be a bit on my end. Got something coming up soon that’ll take 45min-1hr)
May 20, 2021, 11:08 PM
However, when you explicitly query the referenced document, then it will trigger the re-query. For clarity… this is the query that triggers the update to the data

*content* {

... on SanitySection {

content(resolveReferences: {maxDepth: 10})

image
 
}
May 20, 2021, 11:10 PM
Hi User,

user V
and I were looking through this last night.
He came up with a good workaround. I tested it this morning with my pages and they now update when the content is changed.
May 21, 2021, 12:10 PM
If you add a simple query to the page template you are using (or page you have your GraphQL) it’ll get noticed when the content is changed.
Ex:


allSanityProduct {

edges {

node {

id

}

}

}

I’ve got this added to my page.js template and I’m not using it for anything in the content. Just having it in the Query causes those documents to be watched.
May 21, 2021, 12:11 PM
user C
I was thinking the same thing last night… then I got tired and needed a beer 🙂 I’ll give this a try.
May 21, 2021, 3:04 PM
user C
user M
I got this to work, but I think that someone should really detail this out. It’s not clear from the documentation that you need to make an explicit query outside of the _raw query in order force the data reload. It’s reasonable to assume that the _raw query would be sufficient.
May 21, 2021, 5:11 PM
user M
mind adding more info to the issue
user C
filed? I'm not clear on how this even works, why would a top level document that isn't changed or used cause it to watch page level items that are changed?
May 21, 2021, 5:25 PM
user M
mind adding more info to the issue
user C
filed? I'm not clear on how this even works, why would a top level document that isn't changed or used cause it to watch page level items that are changed?
May 21, 2021, 5:25 PM
user M
I’ll send you a video I filmed. Not sure if that will assist w/ what User is working through but it will show you the scenario I encountered.
May 21, 2021, 5:28 PM
Feel free to add to the issue also the more evidence the better 👍
May 21, 2021, 5:29 PM
Looks like User updated the issue makes sense now thanks!
May 21, 2021, 5:39 PM
Looks like User updated the issue makes sense now thanks!
May 21, 2021, 5:39 PM
May 21, 2021, 5:43 PM
May 21, 2021, 5:43 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?