Skip to main content
Browse Documentation
Technologies - JavaScript

Using Contensis with React

Created by r.bromley, last modified by j.maskrey on 12 May 2022

This step by step guide will take you through getting your entries from Contensis and displaying them using the Delivery API and a simple React app.

Requirements

  • Node.js installed
  • NPM
  • Git
  • Command line interface knowledge

Using the demo project

This app will pull in data from the Leif example project in Contensis.

To get started:

Clone the Contensis React project

Bash
git clone https://github.com/contensis/react-leif-example.git

Change directory to the Leif example folder

Bash
cd react-leif-example

Install dependencies

Bash
npm install

Run the app

Bash
npm start

Go to http://localhost:3000 and view the React app running in your browser.

How it works

Include the Contensis delivery API helper

The Contensis delivery API helper contains classes to perform the repetitive tasks of retrieving content from the API.

Include an instance of contensis-delivery-api:

JavaScript
// connection.js const { Client } = require("contensis-delivery-api");

Connect to the Contensis delivery API

Set the root url of the Contensis CMS, access token, and project you want to use with the delivery API.

JavaScript
// connection.js const ContensisClient = Client.create({ rootUrl: "<root-url>", accessToken: "<access-token>", projectId: "<project-id>", });

Export it for use in the app

JavaScript
// connection.js export default ContensisClient

Get a single blog entry by its id

To keep things simple we're using the GUID of the entry as part of the url and pass that along as part of the routing.

JavaScript
// Get the Contensis connection details and connect import ContensisClient from '../connection'; ... // Get the ID from the routing params let params = useParams(); ... // Get the entry by the ID ContensisClient.entries.get({ id: params.blogId, linkDepth: 1 })

Here's a more in-depth example:

JavaScript
// components/BlogItem.js import { useState, useEffect } from 'react'; import { useParams } from "react-router-dom"; import './BlogItem.css'; // Get the Contensis connection details and connect import ContensisClient from '../connection'; const BlogItem = () => { // Get the ID from the routing params let params = useParams(); const [error, setError] = useState(null); const [isLoaded, setIsLoaded] = useState(false); const [blog, setBlog] = useState(null); useEffect(() => { // Get the entry by the ID ContensisClient.entries.get({ id: params.blogId, linkDepth: 1 }) .then( (result) => { setBlog(result); setIsLoaded(true); }, (error) => { setIsLoaded(true); setError(error); } ) }, [params]) if (error) { return <div>Error: {error.message}</div>; } else if (!isLoaded) { return <div>Loading...</div>; } else { return ( <> <h1 className="blog-hero__title">{blog.entryTitle}</h1> <p className="lead">{blog.leadParagraph}</p> ...etc </> ) } } export default BlogItem;

Get a list of blogs

More information on search queries can be found here: https://www.contensis.com/help-and-docs/apis/delivery-js/search/query-operators

JavaScript
// Get the Contensis connection details and connect import ContensisClient from '../connection'; ... // Import Query and Op to query the api const { Query, Op } = require("contensis-delivery-api"); // Create a new query for the latest blog posts const blogsQuery = new Query( Op.equalTo("sys.contentTypeId", "blogPost"), Op.equalTo("sys.versionStatus", "latest") ); // Search using the query ContensisClient.entries.search(blogsQuery) ...

Full example:

JavaScript
// components/BlogListing.js import { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import './BlogListing.css'; // Get the Contensis connection details and connect import ContensisClient from '../connection'; const BlogListing = () => { const [error, setError] = useState(null); const [isLoaded, setIsLoaded] = useState(false); const [items, setItems] = useState([]); useEffect(() => { // Import Query and Op to query the api const { Query, Op } = require("contensis-delivery-api"); // Create a new query for the latest blog posts const blogsQuery = new Query( Op.equalTo("sys.contentTypeId", "blogPost"), Op.equalTo("sys.versionStatus", "latest") ); // Search using the query ContensisClient.entries.search(blogsQuery) .then( (result) => { // Set the items setItems(result.items); setIsLoaded(true); }, (error) => { setIsLoaded(true); setError(error); } ) }, []) if (error) { return <div>Error: {error.message}</div>; } else if (!isLoaded) { return <div>Loading...</div>; } else { return ( <> <h1 className="blogs__title">Our blogs</h1> <ul className="blogs"> {items.map(item => ( <li className="blog-card" key={item.sys.id}> <Link to={`/blog/${item.sys.id}`}> <h2 className="blog-card__title mobile">{item.entryTitle}</h2> <img className="blog-card__img" src={`http://live.leif.zenhub.contensis.cloud${item.thumbnailImage.asset.sys.uri}`} alt={item.thumbnailImage.altText} /> <div className="related-blog__content"> <h2 className="blog-card__title desktop">{item.entryTitle}</h2> <p className="blog-card__text">{item.leadParagraph}</p> <span className="category">{item.category.entryTitle}</span> </div> </Link> </li> ))} </ul> </> ); } } export default BlogListing;