ember-data-contentful

This is an Ember Data adapter/serializer that uses the READ ONLY Content Delivery API from contentful

Compatibility

• Ember.js v3.28 or above
• Ember CLI v3.28 or above
• Node.js v14 or above

Installation

ember install ember-data-contentful

After installing the addon, configure your Contentful Space ID and Access Token inside ENV in config/environment.js:

contentful: {
  space: 'YOUR-CONTENTFUL-SPACE',
  accessToken: 'YOUR-CONTENTFUL-ACCESS-TOKEN',
  previewAccessToken: 'YOUR-CONTENTFUL-PREVIEW-ACCESS-TOKEN',
  usePreviewApi: false,
  environment: 'OPTIONAL CONTENTFUL ENVIRONMENT NAME'
}

You can enable the Preview API for use in development in config/environment.js:

if (environment === 'development') {
  // ...

  ENV.contentful.usePreviewApi = true;
}

Contentful models

Included are a few models to help with some of the default fields. Here is an example:

// models/post.js
import Contentful from 'ember-data-contentful/models/contentful';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';

export default class PostModel extends Contentful {
  @attr('string') body;
  @attr('date') date;
  @attr('string') slug;
  @attr('string') title;

  @belongsTo('contentful-asset', { async: false, inverse: null }) featuredImage;
  @hasMany('author') author;
}

will give you the default fields of contentType, createdAt, and updatedAt.

For multi-word model names, you can name your Contentful model IDs with dashes (ie. timeline-post) make sure the contentType field is inferred correctly.

For any relationship property that is a Contentful Asset (image or other media file), use the contentful-asset model. i.e. image: belongsTo('contentful-asset') in order to get the asset correctly.

Adapters and serializers

You will also need to define an adapter and serializer for your model, so that Ember Data knows to fetch data from Contentful instead of your default backend.

// app/adapters/post.js
import ContentfulAdapter from 'ember-data-contentful/adapters/contentful';

export default class PostAdapter extends ContentfulAdapter {}

// app/serializers/post.js
import ContentfulSerializer from 'ember-data-contentful/serializers/contentful';

export default class PostSerializer extends ContentfulSerializer {}

If you are only using Contentful models, you can set these to app/adapters/application.js and app/serializers/application.js to apply for all models.

Usage

Once you have configured your tokens and created your models, you can use the normal Ember Data requests of findRecord, findAll, queryRecord, and query. For example:

model() {
  return this.store.findAll('project');
}

or

model(params) {
  return this.store.findRecord('project', params.project_id);
}

If you want to use pretty urls and the slug field in contentful, you can make your query like so:

model(params) {
  return this.store.queryRecord('page', {
    'fields.slug': params.page_slug
  });
}

serialize(model) {
  return { page_slug: get(model, 'slug') };
}

and ensure that you declare your route in router.js like this:

this.route('page', { path: ':page_slug' });

Previewing Content

Contentful provides a Preview API that allows you to preview unpublished content. In order to enable this, ensure you have your previewAccessToken configured in config/environment.js and enable the usePreviewApi property.

For more information on the contentful Content Delivery API and the available queries, look here: https://www.contentful.com/developers/docs/references/content-delivery-api/