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;