如何正确配置 gatsby-source-prismic-graphql 预览功能？

Posted 2023-03-08

【中文标题】如何正确配置 gatsby-source-prismic-graphql 预览功能？

【英文标题】：How do you properly configure gatsby-source-prismic-graphql preview functionality?

【发布时间】：2020-09-21 17:18:48

【问题描述】：

我正在使用gatsby-source-prismic-graphql 插件，并且正在尝试正确配置它的 Prismic 预览功能。

预期功能 从 Prismic CMS 的编辑器对已发布的文档进行更改，保存，然后单击眼球预览按钮。我想重定向到我本地的 Gatsby + Prismic 实例，重定向到所需的页面，然后查看我所做的更改。

实际情况 我在 Prismic CMS 上进行了更改，单击预览，然后重定向到 localhost:8000/，而不是我想要预览的页面。 关注Prismic's troubleshooting article 部分“你能在浏览器中看到预览 cookie 吗？”我能够看到我所做的预览更改，表明“问题出在代码中”。

我的linkResolver.js 或gatsby-config.js 是否配置不正确？

src/utils/linkResolver.js

exports.linkResolver = function linkResolver(doc) 

  // Route for customers page
  if (doc.type === 'Customers') 
    return "/" + doc.uid;
  

  // Homepage route fallback
  return '/'

相关部分 gatsby-config.js

    
      resolve: 'gatsby-source-prismic-graphql',
      options: 
        repositoryName: 'my-repo', // (REQUIRED, replace with your own)
        accessToken: `$process.env.API_KEY`, // (optional API access token)
        path: '/preview', // (optional preview path. Default: /preview)
        previews: true, // (optional, activated Previews. Default: false)
        pages: [
           // (optional, builds pages dynamically)
            type: 'Customers',         // TypeName from prismic
            match: '/customers',  // Pages will be generated under this pattern
            path: '/customers-preview', // Placeholder route for previews
            component: require.resolve('./src/templates/customers.js'),
          ,
        ],
      
    

棱镜预览设置 这是我的Prismic preview settings 的照片。 域名：localhost:8000 链接解析器：/preview

【参考方案1】：

您能否在此处发布您传递链接解析器的代码，“doc.type”可能返回未定义，因为在 graphQL 中您需要传递包含页面 UID 的 _meta。

您也可以查看document 了解如何配置linkResolver。

所以如果你的代码是这样的：

   <a href=Link.url(document.generic_link, linkResolver)>Go to page</a>

而你的 GraphQL 查询是这样的

    generic_link 
      ... on PRISMIC_Linked_page 
        _linkType
        _meta 
          uid
        
      
    

那么你的linkResolver应该是这样的：

linkResolver(doc) 
  if (doc.type === 'page') 
    return `/$doc._meta.uid`
  
  return '/'