Hi, im trying to setup previews on our site using the v4 plugin, with the help of the official docs I managed to get normal previews working fine, but I can't seem to get unpublished previews working.
preview.tsx
import * as React from 'react';
import { withPrismicPreviewResolver } from 'gatsby-plugin-prismic-previews';
// Update the path to your Link Resolver
import { linkResolver } from '../utils/linkResolver';
const PreviewPage = () => {
return (
<div>
<h1>Loading preview…</h1>
</div>
);
};
export default withPrismicPreviewResolver(PreviewPage, [
{
repositoryName: process.env.PRISMIC_REPOSITORY_NAME || 'boxinc',
linkResolver,
},
]);
404.tsx
import React, { FC } from 'react';
import { graphql, PageProps } from 'gatsby';
import {
componentResolverFromMap,
withPrismicUnpublishedPreview,
} from 'gatsby-plugin-prismic-previews';
import { useTranslation, Trans } from 'react-i18next';
import styled from 'styled-components';
import { mediaMaxMobile } from '../components/global/breakpoints';
import { StyledA } from '../components/global/button';
import { LocalizedLink } from '../components/global/link';
import SEO from '../components/global/seo';
import {
Heading1Css,
Heading2Css,
Heading3Css,
Text1Css,
Text2Css,
} from '../components/global/typography';
import BlogPostTemplate from '../templates/blogPost';
import InfoPageTtemplate from '../templates/infoPage';
import PageTemplate from '../templates/page';
import PageCoreTemplate from '../templates/pageCore';
import { Theme } from '../types/global';
import { linkResolver } from '../utils/linkResolver';
import { wrapPage } from '../utils/wrapPage';
const CenteredContent = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
margin: 52px 0 6rem 0;
`;
const TitleWrapper = styled.div`
padding: 6.25rem 5rem;
text-align: center;
width: 100%;
background-color: ${({ theme }) => theme.colors.background};
`;
const InfoTitle = styled.span`
${Heading1Css};
display: block;
max-width: 800px;
margin: 0 auto;
color: ${({ theme }) => theme.colors.lightText};
${mediaMaxMobile`
${Text2Css};
color: ${({ theme }: Theme) => theme.colors.lightText};
`};
`;
const ContentWrapper = styled.div`
max-width: 690px;
padding: 5rem 1rem;
margin: 0 auto;
text-align: center;
`;
const Message = styled.p`
${Heading2Css};
color: ${({ theme }) => theme.colors.lightText};
margin-bottom: 0;
${mediaMaxMobile`
${Heading3Css};
color: ${({ theme }: Theme) => theme.colors.lightText};
`};
`;
const Note = styled.div`
${Text1Css};
max-width: 500px;
color: ${({ theme }) => theme.colors.lightText};
padding: 2.5rem 0;
margin: 0 auto;
${mediaMaxMobile`
${Text2Css};
`};
`;
const NotFoundPage: FC<PageProps> = () => {
const { t } = useTranslation();
return (
<CenteredContent>
<SEO title={t('errors.page_not_found_title')} />
<TitleWrapper>
<InfoTitle>{t('errors.page_not_found_title')}</InfoTitle>
</TitleWrapper>
<ContentWrapper>
<Message>{t('errors.page_not_found_text')}</Message>
<Note>
<Trans i18nKey="errors.general_note">
Pretext
<LocalizedLink to={'/'}>Marketing</LocalizedLink>
or
<StyledA href={`mailto:${t('customer_service_email')}`}>
Contact
</StyledA>
postText
</Trans>
</Note>
</ContentWrapper>
</CenteredContent>
);
};
export const query = graphql`
query NotFoundPageQuery($lang: String!) {
allPrismicNavigation(filter: { lang: { eq: $lang } }) {
...LayoutNavigationFragment
}
allPrismicFooter(filter: { lang: { eq: $lang } }) {
...LayoutFooterFragment
}
}
`;
// @ts-ignore
export default withPrismicUnpublishedPreview(wrapPage(NotFoundPage), [
{
repositoryName: 'boxinc',
linkResolver,
componentResolver: componentResolverFromMap({
page: PageTemplate,
}),
},
]);
Page.tsx
import React, { FC } from 'react';
import { graphql, PageProps } from 'gatsby';
import { withPrismicPreview } from 'gatsby-plugin-prismic-previews';
import { shape } from 'prop-types';
import { LayoutFooterFragment } from '../components/global/footer';
import {
LayoutNavigationFragment,
LinkFragment,
} from '../components/global/navigation';
import Page from '../components/page';
import { linkResolver } from '../utils/linkResolver';
import { wrapPage } from '../utils/wrapPage';
type PageTemplateProps = PageProps & {
data: { [key: string]: any };
};
const PageTemplate: FC<PageTemplateProps> = ({ data }) => {
const doc = data.allPrismicPage.nodes[0];
if (doc) {
return <Page {...Page.mapFragmentToProps(doc)} />;
}
return null;
};
PageTemplate.propTypes = {
data: shape({}).isRequired,
};
const WrappedPage = wrapPage(PageTemplate);
WrappedPage.fragments = [
LayoutFooterFragment,
LayoutNavigationFragment,
LinkFragment,
// @ts-ignore
...Page.fragments,
];
// @ts-ignore
export default withPrismicPreview(WrappedPage, [
{
repositoryName: process.env.PRISMIC_REPOSITORY_NAME || 'boxinc',
linkResolver,
},
]);
export const query = graphql`
query PageQuery($uid: String!, $lang: String!) {
allPrismicPage(filter: { uid: { eq: $uid }, lang: { eq: $lang } }) {
...PageFragment
}
allPrismicNavigation(filter: { lang: { eq: $lang } }) {
...LayoutNavigationFragment
}
allPrismicFooter(filter: { lang: { eq: $lang } }) {
...LayoutFooterFragment
}
}
`;
When I try to preview unpublished doc through prismic, I get to the 404 page as expected, the preview is loading and after the loading nothing happens, I stay on the 404 page.
I tried console logging the nodes argument given to the componentResolver function, that returned an empty array, which doesnt sound right to me.
Also when I looked into React devTools, PrismicPreviewProvider had isBootstrap = true and it contained all the page data including the unpublished preview I wanted to view.
What am I missing here? Any help is appreciated.