getContent

The getContent function retrieves a single content item from a project. This function is useful for fetching a specific piece of content, such as an article or blog post.

Example:

// Using the previously created client
const content = await client.getContent('1');
console.log(content);

Interface

The getContent function accepts an id and optionally a QueryParams object. It returns a promise that resolves to the content.

export interface ApiClient {
  getContent: (id: string, queryParam?: QueryParams) => Promise<Content>;
  // ... other methods
}

Parameters

• id: The ID of the content you want to retrieve. This parameter is required and must be a string.

Note

You can find the content id in your project’s Content tab, either in the list or in the content details.

• queryParam: An object containing query parameters to filter the content. This parameter is optional. If not provided, the full content will be returned.

interface QueryParams {
  id?: Filter;
  contentType?: Filter;
  language?: Filter;
}

Caution

The id filter is ignored since the ID is already provided as a parameter.

Note

The contentType filter is somewhat redundant but can be useful to ensure the content you’re retrieving belongs to a specific model.

If the id doesn’t match the model, no content will be returned.

Name	Description
contentType	The model of the content you want to retrieve. Example: client.getContent('1', { contentType: 'post' })
language	The language of the content you want to retrieve. This filter ensures only the model fields in the selected language are returned. Example: client.getContent('1', { language: 'es' })

type Filter =
  | string
  | {
      in?: string[];
    };

Note

More filters will be added in the future

Name	Description
string	Filters the content where the parameter equals this value. Example: client.getContent('1', { contentType: 'post' }) Retrieves a content item whose model equals post.
in	Filters the content where the parameter matches any of the provided values. Example: client.getContent('1', { language: { in: ['es', 'en'] } }) Retrieves a content item with fields matching es and/or en.

Output

The getContent function returns an object representing the content (filtered or not). This object contains the content values and metadata:

export interface Content {
  id: string;
  contentType: { id: string; name: string };
  lastUpdate: Date;
  fields: Field[];
}

export interface Field {
  id: string;
  name: string;
  value: any;
  type: FieldType;
  isArray: boolean;
  language: string;
}

Each content item has an id, a contentType (which represents the model it belongs to), a lastUpdate timestamp, and an array of fields representing the content fields.

Consuming the fields as defined in this interface is useful when integrating with external systems, such as a GraphQL server, or when mapping the fields to another type of content.

However, the easiest and recommended way to consume content is by using the mapContentToModel function after retrieving the data. It returns the content already mapped to its corresponding model.

Example:

import { createClient, mapContentToModel } from '@content-island/api-client';

// ... client initialization code

const content = await client.getContent('1');
console.log(content);
/*
  {
    id: '1',
    contentType: { id: '100', name: 'post' },
    lastUpdate: '2023-10-01T12:00:00Z',
    fields: [
      { id: '111', name: 'title', value: 'Hola Mundo', type: 'short-text', isArray: false, language: 'es' },
      { id: '222', name: 'body', value: 'Este es el cuerpo del post en markdown.', type: 'long-text', isArray: false, language: 'es' },
      { id: '333', name: 'order', value: 1, type: 'number', isArray: false, language: 'es' },
    ],
  }
*/

// Your Post model defined in Content Island
interface Post {
  id: string;
  title: string;
  body: string;
  order: number;
  language: 'es' | 'en';
}

const post = mapContentToModel<Post>(content);
console.log(post);

/*
  {
    id: '1',
    title: 'Hola Mundo',
    body: 'Este es el cuerpo del post en markdown.',
    order: 1,
    language: 'es',
  }
*/

As you can see, the content is already mapped to its corresponding model and you can access fields directly without manually mapping them. For more information on this function, check the mapContentToModel section.