Retrieve data from contentful.com Content Delivery API

Downloads in past


3290.2.45 years ago7 years agoMinified + gzip package size for ember-data-contentful in KB


Build Status npm version Ember Observer Score PRs Welcome FastBoot Ready
This is an Ember Data adapter/serializer that uses the READ ONLY Content Delivery API from contentful

Setup in your app

ember install ember-data-contentful

After installing the addon, configure your Contentful Space ID and Access Token in config/environment.js:
contentful: {
  usePreviewApi: false

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 Contentful.extend({
  author: hasMany('author'),
  body: attr('string'),
  date: attr('date'),
  featuredImage: belongsTo('contentful-asset'),
  slug: attr('string'),
  title: attr('string')
will give you the default fields of contentType, createdAt, and updatedAt.
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.


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