NodeHive JavaScript Client / SDK

NodeHive Client (https://www.npmjs.com/package/nodehive-js) is the offical JavaScript client library for JavaScript client library for NodeHive Headless CMS.

Goal

The client library exists to make data access to the backend super easy. It offers several helper functions which allow you to load nodes, menus, taxonomies and much more without understanding the underlaying details.

How to use

Install

  npm install nodehive-js

Examples

import { NodeHiveClient } from 'nodehive-js';
const client = new NodeHiveClient('https://demo.nodehive.app');

// Load nodes of content type article
const nodes = await client.getNodes('article');

// Get a single node
const node = await client.getNode('60bc852e-d28c-4127-b662-272426da775f', 'article', 'en');

// Load taxonomy terms
const tags = getTaxonomyTerms('tags', 'en');

// Load a single taxonomy term
const tag = getTaxonomyTerm('5', '1', 'en');

// Load media entities
const images = getMedias('image', 'en');

// Load a single taxonomy term
const image = getMedia('60bc852e-d28c-4127-b662-272426da775f', 'image');

// Get a fragment
const fragment = await client.getFragment('ecda70cd-6ced-4e1a-9dd1-74af1641010b', 'logo', 'en');

// Get an area with all its fragments
const area = await client.getFragment('b339b5a8-8de4-4cd1-b9cf-0808a7ec2885', 'footer_section', 'en');

// Load navigation menu "main"
const navigation = await client.getMenuItems('main');

// Load entity based on slug
const entity = await client.getResourceBySlug('node/1', 'en');

// Get translated paths
const translatedPaths = await client.getTranslatedPaths('/node/1');

Advanced example

  import { NodeHiveConfig } from '@/nodehive/jsonapi-config';
  import { NodeHiveClient, NodeHiveOptions } from 'nodehive-js';
  import { DrupalJsonApiParams } from 'drupal-jsonapi-params';

  // Create NodeHiveClient instance
  const client = new NodeHiveClient(
    process.env.NEXT_PUBLIC_DRUPAL_REST_BASE_URL,
    NodeHiveConfig,
    options
  );

Enable debug mode

When debug mode is enabled, the client will log all requests and responses to the console including full context.

  // Enable debug mode
  options.debug = true;

Load the last 10 articles with sorting, limit and tag filter

  import { DrupalJsonApiParams } from 'drupal-jsonapi-params';
  // Add custom api params
  const apiParams = new DrupalJsonApiParams();
  apiParams.addSort('created', 'DESC');
  apiParams.addInclude(['field_image']);
  apiParams.addPageLimit(10);
  apiParams.addFilter('field_tags.name', 'ai','=')

  const articles = await client.getNodes('article', '', apiParams);

  // List articles
  {articles.data.map((article, index) => (
    <li key={index} className="max-w-sm overflow-hidden rounded shadow-lg">

        <a href={`/node/${article.drupal_internal__nid}`} className="font-medium text-red-600 hover:text-red-700">
        {article.field_image?.image_style_uri?.wide ? (
            <Image
            src={article.field_image?.image_style_uri?.wide}
            alt=""
            width={320}
            height={180}
            sizes="(min-width: 1024px) 32rem, 20rem"
            className="mb-0 aspect-video w-full bg-zinc-100 object-cover dark:bg-zinc-800"
            />
        ) : (
            <div className="mb-0 flex aspect-video w-full items-center justify-center bg-zinc-100 object-cover dark:bg-zinc-800">
            <span className="text-sm text-gray-300">No image</span>
            </div>
        )}

        <div className="px-6 pb-2 pt-4">
            <h2 className="mb-2 text-xl">{article.title}</h2>
        </div>
        </a>
    </li>
  ))}

NextJS

We recomment you to use the official starterkit for Next.js https://github.com/NETNODEAG/nodehive-nextjs-starter.

Other frameworks

The NodeHive client library is designed to work with any frontend framework.