在 CMS/Studio 中编辑参考文档时，如何使用 Sanity.io 和 Gatsby 获取监视模式来刷新内容？

How do I get Watch Mode with Sanity.io and Gatsby to refresh content when referenced documents are edited in the CMS / Studio?

我正在使用 Sanity.io、GatsbyJS 3.x

当您在 CMS 中更新内容时，观看模式非常有效，除非您编辑的内容属于 'document'.

类型的引用模式的一部分。

换句话说，对另一个文档引用的文档所做的更改将不会重新呈现页面，尽管已打开监视模式并正确配置。

例如，这是我的页面架构中的一个片段。

...
    {
      name: "content",
              type: "array",
              title: "Page Sections",
              description: "Add, edit, and reorder sections",      
              of: [        
                {
                  type: 'reference',
                  to: [            
                    { type: 'nav' },
                    { type: 'section' },
                    { type: 'footer' }
                  ]
                }
              ],
            },
...

以上架构引用了一个

其中每一个都是 'document' 类型。 请参阅下面的示例。

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,        
      },
    },

在 CMS / Studio 中，当您编辑其中一个字段时，您可以从终端看到 Gatsby 在开发模式下重新编译。但是，页面不会自动重新加载并显示对引用文档所做的更改。

我已经尝试使用重新加载按钮重新加载页面并通过硬刷新，更改不会呈现。

呈现更改的唯一方法是返回 CMS 并编辑主“页面”文档上的字段。然后马上刷新

我是不是做错了什么？这是预期的行为吗？有没有办法让它发挥作用？

对于那些 运行 解决这个问题的人，我能够回答我自己的问题。我希望这可以为您节省我寻找解决方案的时间。

解决方案 TLDR

您需要明确查询引用的文档才能使监视模式正常工作。

带有示例的详细信息

总结

gatsby-source-sanity 插件为数组类型提供以 _raw 开头的便捷查询。当您在 GraphQL 查询中使用 _raw 查询时，它不会触发监视模式来重新加载数据。您需要显式查询引用的文档才能使监视模式正常工作。这可能与插件如何设置侦听器有关，我不知道这是错误还是功能。

例子

我的页面文档具有以下架构

{
      name: "content",
      type: "array",
      title: "Page Sections",
      description: "Add, edit, and reorder sections",
      of: [
        {
          type: "reference",
          to: [
            { type: "nav" },
            { type: 'section' },                                    
          ],
        },        
      ],
    },

该部分是对部分文档的引用。

{ type: 'section' }

我不使用对象的原因是我希望页面部分可在多个页面上重复使用。

假设您在 gatsby-config.js 文件中正确启用了监视模式，监视模式，就像这样...

// gatsby-config.js
{
      resolve: `gatsby-source-sanity`,
      options: {
        projectId: `asdf123sg`,
        dataset: `datasetname`,
        watchMode: true,
        overlayDrafts: true,        
        token: process.env.SANITY_TOKEN,        
      },
    },

然后您应该会看到以下行为：

  • 监听 document/content 更新
  • 重新运行查询，更新数据，热重载页面

您将在终端中看到以下滚动条 window。

success Re-building development bundle - 1.371s
success building schema - 0.420s
success createPages - 0.020s
info Total nodes: 64, SitePage nodes: 9 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success update schema - 0.081s
success onPreExtractQueries - 0.006s
success extract queries from components - 0.223s
success write out requires - 0.002s
success run page queries - 0.010s - 1/1 99.82/s

如果您正在查询主文档或任何引用的对象，这非常有用。但是，如果您正在查询对另一文档的任何引用，那么您需要注意一个陷阱。

陷阱

当您在 GraphQL 查询中使用 _raw 查询时，它不会触发监视模式来重新加载数据。您需要明确查询引用的文档才能使监视模式正常工作。

示例：此查询将不工作

export const PageQuery = graphql`
  fragment PageInfo on SanityPage {
    _id
    _key
    _updatedAt
    _rawContent(resolveReferences: {maxDepth: 10})      
  }
`

示例：此查询将有效

export const PageQuery = graphql`
  fragment PageInfo on SanityPage {
    _id
    _key
    _updatedAt
    _rawContent(resolveReferences: {maxDepth: 10})
    content {
      ... on SanitySection {
        id
      }
    }    
  }
`

这个额外的查询是关键

这里是我明确查询 'content' 数组中引用的文档的地方。

content {
      ... on SanitySection {
        id
      }
    }

您实际上不需要使用该查询产生的数据，您只需将其包含在您的查询中即可。

我的猜测是，这会通知 gatsby-source-sanity 插件设置侦听器，而 _rawContent 片段不会。

不确定这是功能、错误还是只是预期的行为。在撰写本文时，版本如下。

"gatsby": "3.5.1",
"gatsby-source-sanity": "^7.0.0",