在 CMS / Studio 中编辑参考文档时，如何使用 Sanity.io 和 Gatsby 获得监视模式以刷新内容？ 总结示例这个额外的查询是关键

如何解决在 CMS / Studio 中编辑参考文档时，如何使用 Sanity.io 和 Gatsby 获得监视模式以刷新内容？ 总结示例这个额外的查询是关键

我使用的是 Sanity.io、GatsbyJS 3.x

当您更新 CMS 中的内容时，观看模式非常有效，除非您编辑的内容是“文档”类型的引用架构的一部分。

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

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

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

以上架构引用了一个

• 导航架构
• 部分架构
• 页脚架构

这些都是“文档”类型。 请参阅下面的示例。

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,

那么您应该会看到以下行为：

• 监听文档/内容更新
• 重新运行查询、更新数据、热加载页面

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

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 {
      ... on SanitySection {
        id
      }
    }  

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

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

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

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