Fetching content

Alokai integration for Amplience ships with a framework-agnostic Typescript SDK. You can use it to interact with Amplience Content Delivery API and fetch your content items.

Fetching items collectionsri:link

Your primary method for fetching content items should be getContentItems(). It allows you to fetch a collection of items and build sophisticated search queries (e.g. specifying the desired locale to resolve the content in).

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

const { responses } = await sdk.amplience.getContentItems([
  {
    key: "test-banner",
  }, 
  {
    id: "7b0a6dca-50a6-48f8-aeeb-1e802c3d4d23b"
  }
], {
  locale: 'en-GB'
});

Alternatively, you can use the fetchContentItems(). It is more verbose but yields the same results.

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

const { responses } = await sdk.amplience.fetchContentItems({
  requests: [
    { id: '09099a62-2416-4f6d-9072-48e9b33eced0' }
  ],
});

Fetching item by ID or keyri:link

To fetch a single item by ID, you can use the getContentItemById() method.

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

const item = await sdk.amplience.getContentItemById('dd1ecf28-e19c-4666-bd68-2a725c446ceb');

To fetch a single item by deliveryKey, you can use the getContentItemByKey() method.

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

const item = await sdk.amplience.getContentItemByKey('test-banner');

Unfortunately, neither of these methods supports resolving localized content. To achieve that, you can pass an additional argument to the extractComponents() utility:

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

const rawData = await sdk.amplience.getContentItemByKey('some-key');

const extractedData = sdk.amplience.utils.extractComponents(rawData, { locale: 'en-GB' });