Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
contentful
Advanced tools
The contentful npm package is a JavaScript client for the Contentful Content Delivery API and Content Management API. It allows developers to fetch and manage content from Contentful's content infrastructure, making it easy to integrate content into web and mobile applications.
Fetching Entries
This feature allows you to fetch entries from your Contentful space. The code sample demonstrates how to create a client and fetch all entries.
const contentful = require('contentful');
const client = contentful.createClient({
space: 'your_space_id',
accessToken: 'your_access_token'
});
client.getEntries()
.then((response) => console.log(response.items))
.catch(console.error);
Fetching a Single Entry
This feature allows you to fetch a single entry by its ID. The code sample shows how to create a client and fetch a specific entry.
const contentful = require('contentful');
const client = contentful.createClient({
space: 'your_space_id',
accessToken: 'your_access_token'
});
client.getEntry('entry_id')
.then((entry) => console.log(entry))
.catch(console.error);
Fetching Assets
This feature allows you to fetch assets from your Contentful space. The code sample demonstrates how to create a client and fetch all assets.
const contentful = require('contentful');
const client = contentful.createClient({
space: 'your_space_id',
accessToken: 'your_access_token'
});
client.getAssets()
.then((response) => console.log(response.items))
.catch(console.error);
Content Management
This feature allows you to manage content, such as creating new entries. The code sample shows how to create a client and create a new entry in a specific content type.
const contentfulManagement = require('contentful-management');
const client = contentfulManagement.createClient({
accessToken: 'your_management_access_token'
});
client.getSpace('your_space_id')
.then((space) => space.createEntry('content_type_id', {
fields: {
title: {
'en-US': 'Hello, World!'
}
}
}))
.then((entry) => console.log(entry))
.catch(console.error);
Prismic is a headless CMS similar to Contentful. The prismic-javascript package allows you to query content from Prismic's API. It offers similar functionalities such as fetching entries and assets, but with a different API structure and query language.
Strapi is an open-source headless CMS that provides a JavaScript SDK for interacting with its API. The strapi-sdk-javascript package allows you to fetch and manage content, similar to Contentful, but with the added benefit of being open-source and self-hosted.
Readme · Migration · Advanced · TypeScript · Contributing
JavaScript library for the Contentful Content Delivery API and Content Preview API. It helps you to easily access your content stored in Contentful with your JavaScript applications.
What is Contentful?
Contentful provides content infrastructure for digital teams to power websites, apps, and devices. Unlike a CMS, Contentful was built to integrate with the modern software stack. It offers a central hub for structured content, powerful management and delivery APIs, and a customizable web app that enables developers and content creators to ship their products faster.
v6.0.0
)For the minimum supported browser versions, refer to the package.json of this library.
To ensure compatibility across various JavaScript environments, this library is built as an ECMAScript Module (ESM) by default, using the "type": "module"
declaration in package.json
.
We also offer a bundle for the legacy CommonJS (CJS) require syntax, allowing usage in environments that do not support ESM.
Additionally, there is a bundle available for direct usage within browsers.
For more details on the different variants of this library, see Installation.
In order to get started with the Contentful JS library you'll need not only to install it, but also to get credentials which will allow you to have access to your content in Contentful.
npm install contentful
In a modern environment, you can import this library using:
import * as contentful from 'contentful'
Typically, your system will default to our CommonJS export when you use the require syntax:
const contentful = require('contentful')
If this does not work, you can directly require the CJS-compatible code:
const contentful = require('contentful/dist/contentful.cjs')
For browsers, we recommend downloading the library via npm or yarn to ensure 100% availability.
If you'd like to use a standalone built file you can use the following script tag or download it from jsDelivr, under the dist
directory:
<script src="https://cdn.jsdelivr.net/npm/contentful@latest/dist/contentful.browser.min.js"></script>
Using contentful@latest
will always get you the latest version, but you can also specify a specific version number.
<script src="https://cdn.jsdelivr.net/npm/contentful@9.0.1/dist/contentful.browser.min.js"></script>
The Contentful Delivery library will be accessible via the contentful
global variable.
Check the releases page to know which versions are available.
The following code snippet is the most basic one you can use to get some content from Contentful with this library:
import * as contentful from "contentful"
const client = contentful.createClient({
// This is the space ID. A space is like a project folder in Contentful terms
space: 'developer_bookshelf',
// This is the access token for this space. Normally you get both ID and the token in the Contentful web app
accessToken: '0b7f6x59a0',
})
// This API call will request an entry with the specified ID from the space defined at the top, using a space-specific access token
client
.getEntry('5PeGS2SoZGSa4GuiQsigQu')
.then((entry) => console.log(entry))
.catch((err) => console.log(err))
Check out this JSFiddle version of our Product Catalogue demo app.
This library can also be used with the Preview API. In order to do so, you need to use the Preview API Access token, available on the same page where you get the Delivery API token, and specify the host of the preview API, such as:
import * as contentful from "contentful"
const client = contentful.createClient({
space: 'developer_bookshelf',
accessToken: 'preview_0b7f6x59a0',
host: 'preview.contentful.com',
})
You can find all available methods of our client in our reference documentation.
To get your own content from Contentful, an app should authenticate with an OAuth bearer token.
You can create API keys using the Contentful web interface. Go to the app, open the space that you want to access (top left corner lists all the spaces), and navigate to the APIs area. Open the API Keys section and create your first token. Done.
Don't forget to also get your Space ID.
For more information, check the Contentful REST API reference on Authentication.
To help you get the most out of this library, we've prepared all available client configuration options, a reference documentation, tutorials and other examples that will help you learn and understand how to use this library.
The createClient
method supports several options you may set to achieve the expected behavior:
contentful.createClient({
...your config here...
})
The configuration options belong to two categories: request config and response config.
Name | Default | Description |
---|---|---|
accessToken | Required. Your CDA access token. | |
space | Required. Your Space ID. | |
environment | 'master' | Set the environment that the API key has access to. |
host | 'cdn.contentful.com' | Set the host used to build the request URI's. |
basePath | '' | This path gets appended to the host to allow request urls like https://gateway.example.com/contentful/ for custom gateways/proxies. |
httpAgent | undefined | Custom agent to perform HTTP requests. Find further information in the axios request config documentation. |
httpsAgent | undefined | Custom agent to perform HTTPS requests. Find further information in the axios request config documentation. |
adapter | undefined | Custom adapter to handle making the requests. Find further information in the axios request config documentation. |
headers | {} | Additional headers to attach to the requests. We add/overwrite the following headers:
|
proxy | undefined | Axios proxy configuration. See the axios request config documentation for further information about the supported values. |
retryOnError | true | By default, this library is retrying requests which resulted in a 500 server error and 429 rate limit response. Set this to false to disable this behavior. |
application | undefined | Application name and version e.g myApp/version. |
integration | undefined | Integration name and version e.g react/version. |
timeout | 30000 | in milliseconds - connection timeout. |
retryLimit | 5 | Optional number of retries before failure. |
logHandler | function (level, data) {} | Errors and warnings will be logged by default to the node or browser console. Pass your own log handler to intercept here and handle errors, warnings and info on your own. |
requestLogger | function (config) {} | Interceptor called on every request. Takes Axios request config as an arg. |
responseLogger | function (response) {} | Interceptor called on every response. Takes Axios response object as an arg. |
:warning: Response config options have been removed in
v10.0.0
in favor of the new client chain modifiers approach.
Introduced in
v10.0.0
.
The contentful.js library returns calls to sync
, parseEntries
, getEntries
, getEntry
, getAssets
and getAsset
in different shapes, depending on the configurations listed in the respective sections below.
In order to provide type support for each configuration, we provide the possibility to chain modifiers to the Contentful client, providing the correct return types corresponding to the used modifiers.
This way, we make developing with contentful.js
much more predictable and safer.
When initialising a client, you will receive an instance of the ContentfulClientApi
shape.
Chain | Modifier |
---|---|
none (default) | Returns entries in a single locale. Resolvable linked entries will be inlined while unresolvable links will be kept as link objects. Read more on link resolution |
withAllLocales | Returns entries in all locales. |
withoutLinkResolution | All linked entries will be rendered as link objects. Read more on link resolution |
withoutUnresolvableLinks | If linked entries are not resolvable, the corresponding link objects are removed from the response. |
// returns entries in one locale, resolves linked entries, removing unresolvable links
const entries = await client.withoutUnresolvableLinks.getEntries()
You can also combine client chains:
// returns entries in all locales, resolves linked entries, removing unresolvable links
const entries = await client.withoutLinkResolution.withAllLocales.getEntries()
The default behaviour doesn't change, you can still do:
// returns entries in one locale, resolves linked entries, keeping unresolvable links as link object
const entries = await client.getEntries()
The same chaining approach can be used with parseEntries
. Assuming this is the raw data we want to parse:
const localizedData = {
total: 1,
skip: 0,
limit: 100,
items: [
{
metadata: { tags: [] },
sys: {
space: {
sys: { type: 'Link', linkType: 'Space', id: 'my-space-id' },
},
id: 'my-zoo',
type: 'Entry',
createdAt: '2020-01-01T00:00:00.000Z',
updatedAt: '2020-01-01T00:00:00.000Z',
environment: {
sys: { id: 'master', type: 'Link', linkType: 'Environment' },
},
revision: 1,
contentType: { sys: { type: 'Link', linkType: 'ContentType', id: 'zoo' } },
locale: 'en-US',
},
fields: {
animal: {
'en-US': { sys: { type: 'Link', linkType: 'Entry', id: 'oink' } },
},
anotheranimal: {
'en-US': { sys: { type: 'Link', linkType: 'Entry', id: 'middle-parrot' } },
},
},
},
],
includes: {
Entry: [
{
metadata: { tags: [] },
sys: {
space: {
sys: { type: 'Link', linkType: 'Space', id: 'my-space-id' },
},
id: 'oink',
type: 'Entry',
createdAt: '2020-01-01T00:00:00.000Z',
updatedAt: '2020-02-01T00:00:00.000Z',
environment: {
sys: { id: 'master', type: 'Link', linkType: 'Environment' },
},
revision: 2,
contentType: { sys: { type: 'Link', linkType: 'ContentType', id: 'animal' } },
locale: 'en-US',
},
fields: {
name: {
'en-US': 'Pig',
de: 'Schwein',
},
friend: {
'en-US': { sys: { type: 'Link', linkType: 'Entry', id: 'groundhog' } },
},
},
},
],
},
}
It can be used to receive parsed entries with all locales:
// returns parsed entries in all locales
const entries = client.withAllLocales.parseEntries(localizedData)
Similarly, raw data without locales information can be parsed as well:
const data = {
total: 1,
skip: 0,
limit: 100,
items: [
{
metadata: { tags: [] },
sys: {
space: { sys: { type: 'Link', linkType: 'Space', id: 'my-space-id' } },
id: 'my-zoo',
type: 'Entry',
createdAt: '2020-01-01T00:00:00.000Z',
updatedAt: '2020-01-01T00:00:00.000Z',
environment: { sys: { id: 'master', type: 'Link', linkType: 'Environment' } },
revision: 1,
contentType: { sys: { type: 'Link', linkType: 'ContentType', id: 'zoo' } },
locale: 'en-US',
},
fields: {
animal: { sys: { type: 'Link', linkType: 'Entry', id: 'oink' } },
anotheranimal: { sys: { type: 'Link', linkType: 'Entry', id: 'middle-parrot' } },
},
},
],
includes: {
Entry: [
{
metadata: { tags: [] },
sys: {
space: { sys: { type: 'Link', linkType: 'Space', id: 'my-space-id' } },
id: 'oink',
type: 'Entry',
createdAt: '2020-01-01T00:00:00.000Z',
updatedAt: '2020-02-01T00:00:00.000Z',
environment: { sys: { id: 'master', type: 'Link', linkType: 'Environment' } },
revision: 2,
contentType: { sys: { type: 'Link', linkType: 'ContentType', id: 'animal' } },
locale: 'en-US',
},
fields: {
name: 'Pig',
friend: { sys: { type: 'Link', linkType: 'Entry', id: 'groundhog' } },
},
},
],
},
}
// returns parsed entries keeping unresolvable links as link object
const entries = client.withoutLinkResolution.parseEntries(data)
Chain | Modifier |
---|---|
none (default) | Returns assets in a single locale. |
withAllLocales | Returns assets in all locales. |
// returns assets in all locales
const assets = await client.withAllLocales.getAssets()
The default behaviour doesn't change, you can still do:
// returns assets in one locale
const assets = await client.getAssets()
The Sync API always retrieves all localized content, therefore withAllLocales
is accepted, but ignored.
Chain | Modifier |
---|---|
none (default) | Returns content in all locales. |
withoutLinkResolution | Linked content will be rendered as link objects. Read more on link resolution |
withoutUnresolvableLinks | If linked content is not resolvable, the corresponding link objects are removed from the response. |
// returns content in all locales, resolves linked entries, removing unresolvable links
const { entries, assets, deletedEntries, deletedAssets } =
await client.withoutUnresolvableLinks.sync({ initial: true })
More information on behavior of the Sync API can be found in the sync section in ADVANCED.md
The JS library reference documents what objects and methods are exposed by this library, what arguments they expect and what kind of data is returned.
Most methods also have examples which show you how to use them.
http
.
Our library is supplied as node and browser version. Most non-node environments, like React Native, act like a browser. To force using of the browser version, you can require it via:const { createClient } = require('contentful/dist/contentful.browser.min.js')
This library is 100% written in TypeScript. Type definitions are bundled. Find out more about the advantages of using this library in conjunction with TypeScript in the TYPESCRIPT document.
More information about how to use the library in advanced or special ways can be found in the ADVANCED document.
We gathered all information related to migrating from older versions of the library in our MIGRATION document.
We appreciate any help on our repositories. For more details about how to contribute see our CONTRIBUTING document.
This repository is published under the MIT license.
We want to provide a safe, inclusive, welcoming, and harassment-free space and experience for all participants, regardless of gender identity and expression, sexual orientation, disability, physical appearance, socioeconomic status, body size, ethnicity, nationality, level of experience, age, religion (or lack thereof), or other identity markers.
FAQs
Client for Contentful's Content Delivery API
The npm package contentful receives a total of 523,228 weekly downloads. As such, contentful popularity was classified as popular.
We found that contentful demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.