在 CMS / Studio 中編輯引用的文檔時，如何使用 Sanity.io 和 Gatsby 獲得觀看模式以刷新內容？

Question

我正在使用 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'
    },
...

我想引用一個文檔，而不是 object，因為我需要使用基於這些模式創建的內容，以便在整個應用程序中重復使用。

最后，我為監視模式正確配置了源插件。

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 在開發模式下重新編譯。 但是，頁面不會自動重新加載並顯示對引用文檔所做的更改。

我嘗試使用重新加載按鈕重新加載頁面並通過硬刷新，更改不會呈現。

呈現更改的唯一方法是將 go 返回 CMS 並編輯主“頁面”文檔上的字段。 然后它立即刷新。

難道我做錯了什么？ 這是預期的行為嗎？ 有沒有辦法讓它工作？

Answer 1

對於那些遇到這個問題的人，我能夠回答我自己的問題。 我希望這可以節省您花費我找到解決方案的時間。

解決方案 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' }

我不使用 object 的原因是因為我希望頁面部分可以在多個頁面上重復使用。

假設您在 gatsby-config.js 文件中正確啟用了監視模式，監視模式，就像這樣......

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

然后您應該看到以下行為：

• 收聽文檔/內容更新
• 重新運行查詢，更新數據，熱重載頁面

您將在終端 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 {
      ... on SanitySection {
        id
      }
    }  

您實際上不需要使用該查詢產生的數據，您只需將其包含在您的查詢中。

我的猜測是，這會通知 gatsby-source-sanity 插件設置偵聽器，而 _rawContent 片段則不會。

不確定這是功能、錯誤還是只是預期的行為。 在撰寫本文時，版本如下。

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