birkir / gatsby-plugin-prismic-preview Goto Github PK
View Code? Open in Web Editor NEWPreview plugin for gatsby-source-prismic
Preview plugin for gatsby-source-prismic
Hello all,
After unsuccessfully setting up gatsby-source-prismic-graphql due to this issue with GraphQLSource, I have resorted to using the 'classic' gatsby-source-prismic plugin (successfully)
To clarify, before adding the preview plugin Prismic is working just fine.
Unfortunately, despite following the documentation I am having some issues with this preview plugin. In my template and page files, I have imported withPrismicPreview, and am exporting the component with it as suggested in the readme:
export default withPrismicPreview({ data })(About)
The problem I have is on build or deploy I am receiving the error 'data' is not defined
for every page that I am using withPrismicPreview.
Example page component
import React from 'react';
import { graphql } from 'gatsby';
import { withPrismicPreview } from 'gatsby-plugin-prismic-preview';
import SEO from '../components/seo/SEO';
import { DefaultHeader } from '../components/header/Header';
import { GridHero } from '../components/header/Hero';
import SliceZone from '../components/SliceZone';
const About = ({ data }) => {
const page = data.prismicAbout;
const content = page.data;
return (
<>
<SEO
title={`${content.seo_title_short}`}
pathname="/about"
desc={content.seo_description.text}
//banner={content.seo_thumbnail.url}
firstDate={page.first_publication_date}
lastDate={page.last_publication_date}
article
/>
<GridHero />
<DefaultHeader
title={`${content.title.text}`}
subtitle={`${content.title.text}`}
description={`${content.title.text}`}
/>
<SliceZone allSlices={content.content} />
</>
);
};
const query = graphql`
query AboutPageQuery {
prismicAbout {
first_publication_date
last_publication_date
data {
title {
html
text
}
seo_title_short
seo_title_long
seo_description {
text
}
content {
... on PrismicAboutContentText {
slice_type
id
primary {
text {
html
}
}
}
... on PrismicAboutContentContentList {
slice_type
id
primary {
section_title {
html
text
}
}
items {
heading {
html
}
rich_text {
html
}
}
}
... on PrismicAboutContentProfileContent {
slice_type
id
primary {
section_title {
html
text
}
staff {
url
document {
id
uid
data {
name
alias
avatar {
alt
copyright
url
}
role
team
location
bio {
html
text
}
body {
id
}
}
}
}
}
}
}
}
}
}
`;
export default withPrismicPreview({ data })(About);
Config
plugins: [
...
{
resolve: 'gatsby-source-prismic',
options: {
repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
accessToken: process.env.GATSBY_PRISMIC_ACCESS_TOKEN,
// Get the correct URLs in blog posts
//linkResolver: () => post => `/${post.uid}`,
linkResolver: () => prismicLinkResolver,
// PrismJS highlighting for labels and slices
htmlSerializer: () => prismicHtmlSerializer,
// Remove this config option if you only have one language in your Prismic repository
lang: '*',
},
},
{
resolve: 'gatsby-plugin-prismic-preview',
options: {
repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
linkResolver: require('./src/utils/linkResolver'),
path: '/preview',
},
}
...
]
I know you're not maintaining this anymore, but if you know of a fix for this I would happily submit a pull request to clarify any details and examples in the readme @birkir
I can't seem to get this plugin working out of the box. The preview button within Prismic correctly redirects to http://localhost:8000/preview?token=[etc]
(/preview
was set as the link resolver here) but the site eventually redirects back to the homepage at http://localhost:8000/?token=[etc]
. I understand this may be something related to the linkResolver config for this module and I have tried several options to no avail. In the example folder of this module your link resolver is just '/'
.
Do you have any suggestions on how this could be tackled? Is further configuration required?
I've got an error ""Invalid access token" even with the access token I'm using to generate the website.
Can this plug-in work on Netlify?
If yes, how should it be implemented?
To install the module I tried to insert the plugin in the dependencies of the package.json file and the snipped code in the gatsby-config.js file. I received this message Error: Cannot find module './src/linkResolver'
.
Any suggestion?
The README contains:
Usage
import { withPrismicPreview } from 'gatsby-plugin-prismic-preview'; const AboutPage = ({ data }) => ( <h1> About {console.log('This will now include preview data:', data.prismicAboutPage.title)} </h1> ); export default withPrismicPreview({ data })(AboutPage);
but the example folder contains no such usage:
joseph@DESKTOP:~/git/gatsby-plugin-prismic-preview$ grep -r withPrismicPreview example/
joseph@DESKTOP:~/git/gatsby-plugin-prismic-preview$
It would be nice if the two matched up.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.