API parameter to include not yet live content

Feature Requests
,
1

Hi!

We are running a small e-commerce shop, and we have both a production and test environment.

While the builder gives already a great view of how a page will look like, in order to do a full end-to-end test, it would be nice if on the test environment we could see the new (yet unpublished) content.

The API parameter includeUnpublished content allow to partially do this already, if a page is not yet published. However, it would be even more useful if the same (or a different) parameter would allow to retrieve the draft content on an already published page.

Both the production and test environment would then connect to the same builder environment, with the test environment sending this additional parameter to return the new content which has not been published yet.

Thanks for the consideration,
Vincent

2 Likes
2

Thanks Vincent for the write up, looking into possible solutions for this, in the meanwhile, recommend going through some of the possible paths to manage multiple environments with Builder in this post: Managing multiple projects/environments in Builder , maybe the easiest for this case would be to duplicate the draft version and publish it with a custom targeting env equal to test then in your codebase always include the custom targeting attribute in your api calls when under a test environment.

3

Okay here’s how to go about loading latest draft from the API, it requires knowing the content ID, so you’d make an extra API Call to get the latest draft, something like:

import { builder } from "@builder.io/react" // or `@builder.io/sdk`

builder.init(process.env.BUILDER_API_KEY)
export async function resolveBuilderContent(modelName: string, userAttributes: Record<string, string | number>, loadLatestDraft = false) {
  let page = await builder.get(modelName, { userAttributes }).toPromise();
  if (page && loadLatestDraft) {
      page = await fetch(`https://builder.io/api/v2/content/${modelName}/${page.id}?apiKey=${apiKey}&preview=true&noCache=true&cachebust=true`).then(res => res.json())
  }

  return page;
}

Then you can use this function to fetch builder content for you, this can be in useEffect if you’re using plain create-react-app, or in getStaticProps / getServerSideProps if you’re using next-js, for example

// pages/[[...path]].tsx
const previewLatestDraft = process.env.NODE_ENV !== 'production';

export async function getStaticProps({
  params,
  locale,
}: GetStaticPropsContext<{ path: string[] }>) {
  const page = await resolveBuilderContent('page', {
    locale,
    urlPath: '/' + (params?.path?.join('/') || ''),
  }, previewLatestDraft);
  return {
    props: {
      page,
    },
    revalidate: isDev ? 1 : 240,
  }
}
1 Like
4

Many thanks for looking into this Aziz, this is exactly what I need.
I really appreciate your help!

Thanks,
Vincent

1 Like
5

Hey, Aziz,

This works great for content with published=draft, but it also includes content with published=archived. Is there a way to include published and draft content but exclude archived content?

(See also How to skip fetching archived content)