Live Preview not working for Draft Entries

Technical Questions
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
e.g. Builder.io: Visual Development Platform
Builder.io: Visual Development Platform

Builder public api key
go to Builder.io: Visual Development Platform and copy your PUBLIC api key
e2f096ba17f74dfd9c140ac050f349a4

What are you trying to accomplish
e.g. I want to integrate builder on a landing page
We have a model blog-article that updates on the live preview as we edit fields with published articles just fine. However, when its a draft article, the live preview does not work. Refreshing the entire builder.io UI updates it though. I have messed with including includeUnpublished and gotten decently far however the live preview still does not work. In addition, includeUnpublished is not valid according to typescript and I have to pass it to the generic options object (may need some docs updates about this? I also saw there was a new SDK coming so not sure)

Screenshots or video link
Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing

image
image1252×517 23.7 KB

See how the title does not update with the new title in the menu.

Code stack you are integrating Builder with
e.g. NextJS, react, Shopify
NextJS

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

Not much to give here but this is the `BuilderContent object:

<BuilderContent
      content={article}
      options={{
        options: {
          includeRefs: true,
          includeUnpublished: true,
        },
      }}
      model="blog-article"
    >
      {(data, loading, fullContent) => {
        if (loading) return;
        console.log('data rerendered', data);
        // console.log('content', fullContent);
        return (
          <>
            <Head>
              {/* Render meta tags from custom field */}
              <title>{data.title}</title>
              <meta name="description" content={data.excerpt} />
              {data.image && <meta name="og:image" content={data?.image} />}
            </Head>

            <Stack row maxWidth={1000} m="auto" p="$6">
              <ArticlePost {...data} />
              <Stack flexBasis="30%">
                <BuilderComponent
                  model="blog-article"
                  content={fullContent}
                  options={{
                    options: {
                      includeRefs: true,
                      includeUnpublished: true,
                    },
                  }}
                />
              </Stack>
              {/* Render the Builder drag/drop'd content */}
              {/* <BuilderComponent model="blog-article" content={content} options={{ includeRefs: true }} /> */}
            </Stack>
          </>
        );
      }}
    </BuilderContent>

and here is the getStaticProps:

const article = await builder
    .get('blog-article', {
      // Include references, like our `author` ref
      options: { includeRefs: true, includeUnpublished: true },
      userAttributes: {
        urlPath: `/blog-v2/${params.slug}`,
      },
      // cacheSeconds: 5,
      query: {
        data: {
          slug: params.slug,
        },
        // 'data.slug.$eq': params.slug,
      },
      // includeUnpublished: true,
    })
    .promise();

  // console.log('article getStaticProps', params, article);

  return {
    props: {
      article,
    },
    revalidate: 20,
  };
2

Hello @kacey,

It appears that the issue lies within the getStaticProps function, where you are attempting to use userAttributes without having any targeting set for the blog-article.

To potentially resolve the issue you’re facing, consider removing the urlPath from userAttributes .

Example:

export async function getStaticProps({ params }) {
  const article =
    (await builder
      .get("blog-article", {
        // Include references, like our `author` ref
        options: { includeRefs: true, enrich: true, includeUnpublished: true },
        query: {
          // Get the specific article by handle
          "data.slug": params.slug,
        },
      })
      .promise()) || null;
  return {
    props: {
      article,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 5 seconds
    revalidate: 5,
  };
}
3

@manish-sharma I tried this and it does not seem to be the issue; I even corrected the targeting in my model to be more precise.

Another thing I noticed is:

        query: {
          // Get the specific article by handle
          "data.slug": params.slug,
        },

Does not work for me for some reason; it has to be this:

        query: {
          // Get the specific article by handle
          "data": {
             "slug: params.slug,
           }
        },

The weird thing is a lot of the time when I have dev tools open in the builder io tab live editing works; if its closed, its not working.

4

Hello @kacey,

Can you share a screenshot of the directory setup for your project?

5

Sure, here you go:
image

6

@manish-sharma I found a way to make this work (and perhaps its a bug/optimization/memoization issue on builder.io’s end?).

See how I have the block builder on my blog page in the sidebar here with no blocks added:

image
image1529×457 23.1 KB

With how it is setup, when I update the custom “title” field, the live preview does not update.

If I add a block (in this case a symbol I have), live preview starts magically working. My guess is there is some memoization or something going on that is dependent on the existence of blocks or something? Maybe that can help you all debug a bit here @manish-sharma and see if it is truly a bug or just some use case that is not handled.

7

Hello @kacey,

Thank you for bringing this to our attention. The behavior you’re observing is expected. Since the title is positioned outside the <BuilderComponent> block, it will only update after you publish the changes.