extractComponents

The function receives a Contentful data object as the first argument and traverses it recursively. It uses a set of predicates to detect certian types of objects and a set of resolvers to resolve them into the desired format. Among others, the method resolves the following objec types: images, rich text, entries.

The crucial role belongs to the entry resolver. It defines the final shape of components and their nested entries. By default, the resolver removes the metadata and sys objects from the entry. It also calls the extractComponents function recursively to resolve all of the entry's nested fields (including linked entries). It differentiates entries meant to be rendered as standalone frontend components (e.g. Banner, Grid, Accordion) from entries meant to be used only as nested data containers (e.g. Button, Styles). The former must include a component field to allow the resolver to recognize them.

Certain of the default resolvers can be customized. You can pass them to the extractComponents function as the second argument. Each custom resolver receives four arguments: the content object, the extractComponents function (in case you need to call it again, e.g. to resolve nested entries), the customUtils object and the defaultUtils object (in case you still need to use the default resolvers).

See the examples section for more details.

Signature

declare function extractComponents(
	content: Content,
	customResolvers?: CustomResolvers
): AgnosticCmsComponent | AgnosticCmsComponent[] | Content | Content[];

Parameters

Returns

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

Referenced Types

• Content
• CustomResolvers
• AgnosticCmsComponent

Examples

Basic usage.

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

const rawData = await sdk.contentful.getContent({
  url: '/test',
  locale: 'en-US'
});

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

Customizing the image resolver. By default, the resolver transforms Contentful images to a CMS-agnostic format expected by Vue Storefront components:

interface AgnosticCmsImage {
  desktop?: string;
  thumbnail?: string;
  mobile?: string;
  alt?: string;
}

Customizing the entry resolver. Re-using the default resolver and extending its behavior to preserve the tags array. Notice how we're passing on extractComponents and customUtils as arguments to the default resolver.

const extractedData = sdk.contentful.utils.extractComponents(rawData, {
 resolveEntry: (
   content,
   extractComponents,
   customUtils,
   defaultUtils
 ) => {
   const defaultResolvedEntry = defaultUtils.resolveEntry(content, extractComponents, customUtils);
   return {
     tags: content.metadata.tags,
     ...defaultResolvedEntry,
   }
 }
}));