首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何正确配置gatsby源-棱镜图形do预览功能?

如何正确配置gatsby源-棱镜图形do预览功能?
EN

Stack Overflow用户
提问于 2020-06-02 21:04:55
回答 1查看 346关注 0票数 2

我正在使用gatsby源-棱镜-图形插件,并试图适当地配置它的棱镜预览功能。

预期功能

在一个已经发布的文档上,我做了一个修改,保存,然后点击眼球预览按钮。我希望被重定向到我的本地Gatsby +棱镜实例,重定向到所需的页面,并查看我所做的更改。

到底发生了什么,

我改变了棱镜CMS,点击预览,然后被重定向到localhost:8000/,而不是我想要预览的页面。

下面的百里麦疑难解答文章部分是“您能在浏览器中看到预览cookie吗?”我能够看到我所做的预览更改,表明“问题在代码中”。

是my gatsby-config.js 还是gatsby-config.js未正确配置?

src/utils/linkResolver.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
exports.linkResolver = function linkResolver(doc) {

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

  // Homepage route fallback
  return '/'
}

gatsby-config.js相关部分

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    {
      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

EN

回答 1

Stack Overflow用户

发布于 2020-06-04 06:10:02

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

您还可以检查这个文档如何配置linkResolver。

因此,如果您的代码是这样的,:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   <a href={Link.url(document.generic_link, linkResolver)}>Go to page</a>

您的GraphQL查询如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    generic_link {
      ... on PRISMIC_Linked_page {
        _linkType
        _meta {
          uid
        }
      }
    }

然后您的linkResolver应该是这样的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
linkResolver(doc) {
  if (doc.type === 'page') {
    return `/${doc._meta.uid}`
  }
  return '/'
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62165553

复制
相关文章
如何正确执行功能API测试
测试曾经在GUI级别进行,但开发人员已经意识到它是多么脆弱。本文将讲述更多API测试以及如何使其最佳运行。
FunTester
2019/09/17
1K0
如何正确配置Nginx+PHP
对很多人而言,配置Nginx+PHP无外乎就是搜索一篇教程,然后拷贝粘贴。听上去似乎也没什么问题,可惜实际上网络上很多资料本身年久失修,漏洞百出,如果大家不求甚解,一味的拷贝粘贴,早晚有一天会为此付出代价。
LA0WAN9
2021/12/14
5.6K0
[985]No package *** available. Error: Nothing to do(更新yum源)
repo 文件是 Linux 中yum源(软件仓库)的配置文件,通常一个 repo 文件定义了一个或者多个软件仓库的细节内容,例如我们将从哪里下载需要安装或者升级的软件包,repo文件中的设置内容将被yum读取和应用!
周小董
2021/05/24
7.7K0
[985]No package *** available. Error: Nothing to do(更新yum源)
虚拟机如何配置yum源_rhel7配置本地yum源
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/170105.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/21
2.4K0
虚拟机如何配置yum源_rhel7配置本地yum源
IntelliJ IDEA 如何配置数据源
在 IntelliJ IDEA 中,可以通过打开 Data Sources and Drivers 对话框来配置数据源和测试你的数据库连接。
HoneyMoose
2020/09/20
3K2
IntelliJ IDEA 如何配置数据源
如何在Mac上正确使用分屏功能
macOS提供了一个方便的功能,可以并排查看两个应用程序,同样分割屏幕。下面小编就为大家介绍一下如何在Mac上使用Split View功能 。无论您是想更有效地完成某些工作还是浏览网页时更轻松地执行多任务,在Split View中构建的macOS都是一项非常有用的功能。
MAC先森
2019/09/10
7.1K0
linux怎样配置yum源_yum配置源
YUM(Yellow dog Updater Modified): yum是Redhat系列系统基于RPM包构建的软件更新机制,可以自动解决 rpm 包之间的依赖关系,所有软件包由集中的yum软件仓库提供。其理念是使用一个中心仓库(repository)管理一部分甚至一个distribution的应用程序相互关系,根据计算出来的软件依赖关系进行相关的升级、安装、 删除等操作,减少了Linux用户一直头痛的dependencies的问题。 可以同时配置多个资源库(Repository),简洁的配置文件(/etc/yum.conf),自动解决增加或删除rpm包时遇到的依赖性问题,保持与RPM数据库的一致性。
全栈程序员站长
2022/09/21
8.7K0
JAVA实现文件预览功能
近期做的项目要求实现文件在线预览功能,可支持多种文件类型,TXT,DOC,PDF,XLS ,
全栈程序员站长
2022/08/28
2.8K0
JAVA实现文件预览功能
[Office] Word 2016 新功能预览
当在word文档中想插入公式,但是又懒于每一个没一个符号去输入的时候,word 2016提供了很好的手写公式功能:墨迹公式,它可以识别你用鼠标在屏幕上写出来的公式
轻舞飞扬SR
2021/02/24
1.4K0
[Office] Word 2016 新功能预览
CentOS 7如何配置yum源「建议收藏」
本教程主要讲解配置“本地yum源”、“网络yum源”以及“ELEP源”
全栈程序员站长
2022/09/21
14.8K0
linux配置pip源_配置国内PIP源方法
python开发者都知道,当我们pip install安装扩展库的时候,经常遇到安装失败(超时)等,有时候是因为国外镜像被屏蔽了,带来不少麻烦,
全栈程序员站长
2022/09/06
4.9K0
pip源配置
请参考https://mirrors.tencent.com/help/pypi.html
Windows技术交流
2020/03/19
29.8K0
如何正确配置 Ubuntu 14.04 服务器?
EarlGrey
2017/03/19
4.1K0
yum源配置
在配置yum前首先得说说rpm,在redhat和centos linux系统上,rpm作为软件包管理工具,可以方便的安装、查询、卸载软件包。常见命令如下:
我的小碗汤
2018/08/22
5.2K0
yum源配置
pip源配置
配置文件放置位置 Linux下: 放在~/.pip/pip.conf windows下: 用户文件夹下\pip\pip.ini
全栈程序员站长
2022/08/22
3.2K0
office文件 vue 预览_vue实现pdf文档在线预览功能
针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下
全栈程序员站长
2022/08/30
3.3K0
C# 6.0 功能预览 (一)
一、索引的成员和元素初始化 1.1 原始初始化集合 Dictionary 1.2 键值初始化集合 Dictionary 1.3 运算符 $ 初始化集合 Dictionary 二、自动属性的初始化 一不小心发现 C# 已经到 6.0 了,现在项目中使用的还是 4.0,这节奏,完全跟不上啊! 虽然自己也没有使用过 6.0,既然看到了,就拿出来和园有分享一下。 看到了@dotnetgeek的评论,非常感谢,认为是给我这样浮躁的人善意的警告,不应该盲目跟风追新,应该老老实实把现在的搞清楚,万变不离其宗
数据分析
2018/03/01
9880
pip镜像源配置,pip使用国内镜像源, pip禁用国外源,pip源配置
默认情况下 pip 使用的是国外的镜像,在下载的时候速度非常慢,本文我们介绍使用国内清华大学的源,地址为:
高久峰
2023/06/20
1.3K0
Gatsby: 代码高亮
对于 gatsby-starter-blog,在 src/templates/blog-post.js 的 BlogPostTemplate 类中添加:
谛听
2020/01/04
1.4K0
点击加载更多

相似问题

gatsby源棱镜图query查询结构

23

棱镜预览不显示gatsby中更新的内容

10

(Gatsby +棱镜):内容关系URL

24

Gatsby: gatsby源- graphql &gatsby-查询

10

Gatsby源共享

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文