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 collections

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 key

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' });