Usage

Alokai integration for Contentstack ships with a framework-agnostic Typescript SDK. You can use it to:

fetch your content from the Contentstack Delivery API,
initialize the Live Preview feature.

Before you read

Visit Alokai SDK documentation to learn how to access sdk in both Next and Nuxt.

Fetching content by Field Type

To fetch content by any field type you can use getContent method.

const entry = sdk.contentstack.getContent({
  url: 'home-page'
});

Fetching content by Custom Type

You can search content on top of custom config as well. To do this instead of using page url or entry id use custom config in the getContent method. Like this.

const entry = sdk.contentstack.getContent({
  custom: {
    type: 'page';
    field: 'title';
    value: 'Home';
  }
});

Fetching content by Custom Query

You can query your content using all query options described in Contentstack docs.

For example, you'll be able to use multiple custom fields and types.

const entry = sdk.contentstack.getContent({
  customQuery: {
    $and: [{ title: 'Redmi Note 3' }, { color: 'Gold' }];
  }
});

Fetching content Collections

You can return more than one content entry by enabling includeCount property

const entry = sdk.contentstack.getContent({
  type: 'blogpost',
  includeCount: true,
});

Handling multiple entries data

Multiple Entries response returns array of two elements entries objects (array) and entries count (number). It is recommended to destructure output array before use.

Content Pagination

The Get all entries returns only the first 100 entries of the specified content type. You can paginate the output by using the limit & skip parameter. For example, if you have 200 entries and you want to retrieve them all, but display 10 items at a time (one page) please use: limit=10 and skip=10 parameters.

const entry = sdk.contentstack.getContent({
  type: 'blogpost',
  includeCount: true,
  limit: 10,
  skip: 10
});

Pagination state

Contentstack API does not provide any pagination data except total count (total number of entries). All pagination logic and state need to be handled directly on the front-end.

Sorting content data

When fetching entries, you can sort them in the ascending or descending order concerning the value of a specific field in the response body.

import { sdk } from '~/sdk.config';

sdk.contentstack.getContent({
  type: 'blogpost',
  includeCount: true,
  orderDir: 'asc',
  orderField: 'title',
});

Using Typescript IntelliSense

Thanks to the Contentstack Typescript SDK, our SDK methods such as getContent are fully typed. Therefore, building even the most sophisticated search queries can be a piece of cake with the Typescript IntelliSense in your IDE.

Enabling Live Preview

Because of known issue with the Contentstack Live Preview SDK this feature might not work as expected. Here you can find more details and track the issue itself.

Contentstack's Live Preview feature is a valuable tool for content creators and editors, providing a real-time preview of how content will appear across different channels and devices before it is published. This feature enhances the content creation process by offering immediate visual feedback, allowing teams to ensure accuracy and consistency across various formats and platforms.

To enable Contentstack Live Preview within your Storefront please use dedicated utility provided by the Alokai SDK. Then, invoke/include it on your cms-driven page.

live-preview.tsx

export default function LivePreview() {
  const router = useRouter();
  const sdk = useSdk();
    
  useEffect(() => {
    sdk.contentstack.utils.initLivePreview({
      onLiveEdit: () => {
        console.debug("Contentstack Live Edit Detected. Refreshing page.");
        router.refresh();
      },
    });
  }, []);

  return null;
}