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

【问题标题】：How do you properly configure gatsby-source-prismic-graphql preview functionality?如何正确配置 gatsby-source-prismic-graphql 预览功能？
【发布时间】：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

【问题讨论】：

标签： javascript reactjs graphql gatsby prismic.io

【解决方案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 '/'
}

【讨论】：