Sanity preview not working when I add or change content in Sanity Studio

Question

I've been trying to get live preview in Sanity to work for several days now, without luck.

It works like a charm when I follow this tutorial: how-to-quickly-set-up-a-gatsby-js-jamstack-website-with-a-headless-cms.

But when I create a starter blog like this one: sanity-template-gatsby-blog, it does not work at all.

I've followed three tutorials, but it always fails, even if I do exactly the same.

This is my gatsby-config:

module.exports = {
  plugins: [
    "gatsby-plugin-postcss",
    "gatsby-plugin-react-helmet",
    {
      resolve: "gatsby-source-sanity",
      options: {
        projectId:"nt51j1jx",
        dataset:"production",
        token: "ABC123", //this is a dummy for this post
        watchMode: true,
        overlayDrafts: true
      },
    },
  ],
};

When I create a new post and click "web preview", I get a 404

It does not help to click publish, and I can't see any changes on the local host. Changes to existing posts are also not visible.

I have to restart the server every time I want to see the changes. That's not the case with the first template I mentioned, but that one crashes when I try to install Sanitys code-input plugin, which I need.

Thanks in advance!

Answer 1

I finally solved it by following this post: https://www.frontendstumbles.com/gatsby-and-sanity-cms-tutorial/

A nice step by step guide that creates a Gatsby and Sanity starter that works with watch mode and drafts mode.

Answer 2

The preview environment must be rebuilt when you create a new page.

That's a new static html file to be built. This is different from live preview updates, which amend the page data client-side.

UPDATE: Sanity + Gatsby Cloud Live Preview is a known bug at the moment. I guess we join the Slack channel to hear when they fix it?