时间戳

首页 > 解决方案 > 如何正确配置 gatsby-source-prismic-graphql 预览功能？

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

问题描述

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

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

实际发生
了什么 我在 Prismic CMS 上进行了更改，单击预览，然后被重定向到localhost:8000/而不是我想要预览的所需页面。

按照Prismic 的故障排除文章部分“你能在浏览器中看到预览 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'),
          },
        ],
      }
    }

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

标签： javascriptreactjsgraphqlgatsbyprismic.io

解决方案

你能在这里发布你传递linkResolver的代码吗，'doc.type'可能返回一个未定义的，因为在graphQL中你需要传递包含页面UID的_meta。

您还可以查看有关如何配置 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 '/'
}

推荐阅读