extractComponents

Simplifies and transforms the data from Amplience into the format expected by CMS-agnostic Vue Storefront components. The function receives a Amplience data object as the first argument and traverses it recursively. It uses a set of predicates to detect certain types of objects and a set of resolvers to resolve them into the desired format.

Default resolvers and predicates can be customized. You can pass them to the extractComponents function as the third argument.

Each custom resolver receives three arguments: the content object, the params object (the one that is passed to the extractComponents function) and the stack array (which contains all objects parent objects of the currently resolved one).

See the examples section for more details.

Signature

declare function extractComponents<TParams extends ExtractComponentsParams>(
	content: any,
	params?: TParams,
	custom?: ExtractComponentsCustom<TParams>
): any;

Parameters

Name	Required	Type	Description
`content`	Required	`any`	Amplience data object which gets transformed into the format expected by Vue Storefront components.
`params`	Optional	`TParams`	Object with parameters that will be passed as the second argument to predicates and resolvers.
`custom`	Optional	`ExtractComponentsCustom<TParams>`	Object defining custom resolvers and custom predicates.

Returns

Returns a CMS-agnostic object which can be used by Vue Storefront components.

Referenced Types

Examples

Basic usage.

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

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

const extractedData = sdk.amplience.utils.extractComponents(rawData);

Resolving localized values for a specific locale. Useful while fetching Amplience content using methods such as getContentItemByKey or getContentItemById which offer no way to specify the locale and return all localized values.

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

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

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

Customizing resolvers and predicates.

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

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

const extractedData = sdk.amplience.utils.extractComponents(rawData, { locale: 'en-GB' }, {
  customPredicates: (defaults) => ({
    metadata: (content) => defaults.metadata(content),
    image: (content) => defaults.image(content),
    video: (content) => defaults.video(content),
    markdown: (content) => defaults.markdown(content),
    contentItem: (content) => defaults.contentItem(content),
    localizedValue: (content) => defaults.localizedValue(content),
  }),
  customResolvers: (defaults) => ({
    immediate: {
      image: (content) => defaults.immediate.image(content),
      video: (content) => defaults.immediate.video(content),
      markdown: (content) => defaults.immediate.markdown(content),
      metadata: (content) => defaults.immediate.metadata(content),
    },
    preChildren: {
      localizedValue: (content) => defaults.preChildren.localizedValue(content),
    },
    postChildren: {
      contentItem: (content) => defaults.postChildren.contentItem(content),
    },
  }),
});

Adding new predicate-resolver pairs. Predicates and resolvers always have to go together and share the same name.

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

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

const extractedData = sdk.amplience.utils.extractComponents(rawData, { locale: 'en-GB' }, {
  customPredicates: () => ({
    test1: (content) => true,
    test2: (content) => true,
    test3: (content) => true,
  }),
  customResolvers: () => ({
    immediate: {
      test1: (content) => content,
    },
    preChildren: {
      test2: (content) => content,
    },
    postChildren: {
      test3: (content) => content,
    }
  }),
});