Preview iframe not displaying except entry has been published

General
1

Hi, I have a doubt about the preview iframe for the data models entries.
I have a blog, and the preview is working fine for those that have been already published, or also published and unpublished later. But it’s not working for those that hasn’t been published at all.

Screen Shot 2022-04-27 at 10.42.44
Screen Shot 2022-04-27 at 10.42.442880×1548 277 KB

Screen Shot 2022-04-27 at 10.44.17
Screen Shot 2022-04-27 at 10.44.171920×1034 118 KB

The first has not been published at all. The second has been published and unpublished later.

The preview URLs I’m using are:
For the first: https://scale.com/blog/trans-day-of-visibility-2?url=/builder_editing
For the second: How ML Linting Meaningfully Improves Adaptive Document Processing at Scale - Scalebuilder_editing

I assume that has something to do with that the first isn’t under Blog - Scale at all because is not published? How can I preview it then before publishing it?

thanks

2

Hi @emiliano, I took a look at the browser console for your unpublished page and saw a 404 error and Error: Failed to load static props which is I suspect is being thrown by Next.js during getStaticProps(). This might be occurring if you are not generating paths for the unpublished content in getStaticPaths(). Can you try setting the option to query unpublished content and see if that works? In your builder.get() and builder.getAll() you would pass options: {includeUnpublished: true}.

1 Like
3

I opened a pr with that change and using the deployment link isn’t working either…

https://website-7gy908mt3-scaleai.vercel.app/blog/trans-day-of-visibility-2?url=/__builder_editing__

my getStaticPaths now:

export async function getStaticPaths() {
  const pages = await builder.getAll('blog-model', {
    options: { noTargeting: true, includeUnpublished: true },
    omit: 'data.blocks'
  });

  return {
    paths: pages.map(page => ({ params: { slug: `${page.data.slug}` } })),
    fallback: true
  };
}
4

@ancheetah thanks for your time, just left the doubt above

5

Hi @emiliano sorry you’re still having problems with this. Is there more code you can share for that page where you are rendering the <BuilderComponent> and adding any additional logic for the page preview? A full reproduction with a Codesandbox or similar would be even better. Thanks!

6

@ancheetah Sure!

export default function Post({ blog }) {
  if (!blog) {
    return (
      <NoSSR>
        <Error statusCode={404} />
      </NoSSR>
    );
  }

  return (
    <BuilderContent
      content={blog}
      model="blog-model"
      options={{ includeRefs: true, includeUnpublished: true }}
    >
      {data => (
        <div className="text-white bg-black">
          <Header
            pathname={`/blog/${data?.slug}`}
            title={`${data?.title} - Scale`}
            description={data?.metaDescription}
          />
          <Article post={data} content={data?.content} />
          <TryBanner border />
          <Footer
            textColor="text-neutral-400"
          />
        </div>
      )}
    </BuilderContent>
  );
}

export async function getStaticPaths() {
  const pages = await builder.getAll('blog-model', {
    options: { noTargeting: true, includeUnpublished: true },
    omit: 'data.blocks'
  });

  return {
    paths: pages.map(page => ({ params: { slug: `${page.data.slug}` } })),
    fallback: true
  };
}

export async function getStaticProps({ params }) {
  let blog;

  try {
    const builderBlog = await builder
      .get('blog-model', {
        query: { 'data.slug': params.slug }
      })
      .promise();
    blog = builderBlog;
  } catch (error) {
    handleError(error);
  }

  if (!blog) {
    return {
      notFound: true,
      revalidate: 5
    }
  }

  return {
    props: {
      blog
      },
      revalidate: 5
    }
  };
}
7

@ancheetah so I fix the getStaticProps to fetch also the unpublished and it’s ok, but when I add this to my code:

  if (!blog || blog.published === 'draft') {
    return (
      <NoSSR>
        <Error statusCode={404} />
      </NoSSR>
    );
}

The preview of course throughs a 404.
How can I through a 404 in production but preview the unpublished blog in Builder? thanks

8

@emiliano can you try using the logic recommended in this doc and let me know if that works?

  if (!Builder.isEditing && !Builder.isPreviewing && !blog) {
     return <Your404Page />
  }