Gesso Drupal

Installation

yarn add @acromedia/gesso-drupal @acromedia/gesso-cms

@acromedia/gesso-cms is a peer dependency and needs to be installed as well.

Configuration

• create a drupal.ts file within your src/ directory.

import { useCMS as CMS } from '@acromedia/gesso-cms';

import plugins from '@acromedia/gesso-drupal';

const config = {
  drupalUrl: process.env.DRUPAL_URL,
};

export const cms = CMS(plugins, config);

• set DRUPAL_URL in your .env to point at your Drupal instance.

DRUPAL_URL=https://my-drupal-site.site1.com

• Import the hooks and start pulling content, see useContent example below.

Usage

Examples

• useContent

import { componentFactoryPlugins } from '@acromedia/gesso-drupal';
import { cms } from '../drupal';

const { useContent } = cms;

export default function Page() {
  const content = useContent('', `/some-path`);
  const { payload } = content;

  if (content.state === 'loading') {
    return <>Loading...</>;
  }

  if (!payload) {
    return <>There was a problem loading the content.</>;
  }

  const {
    title,
    data: { body, fieldComponents },
  } = payload;

  return (
    <Section disableGutters>
      <Typography variant="h1">{title}</Typography>
      {body ? (
        <div dangerouslySetInnerHTML={{ __html: body as string }} />
      ) : null}

      <ComponentFactory data={fieldComponents as ComponentFactoryData[]} />
    </Section>
  );
}

• useTag

The useTag plugin by default is used to return a specific term from the "Tag" vocabulary. For example useTag("3") will return information about the term with an id of 3 in the "Tag" vocabulary. The useTag plugin has a number of configuration options to extend its utility

• withJsonAPI: a boolean to determine whether the plugin uses JSON:API or graphql for data fetching. The graphql method is the default and it should be noted that several configuration options are not yet supported by withJsonAPI === true.
• withContent: a boolean that includes references to content that contain reference to a specified "Tag" term. This is only supported by graphql.
• withVocabulary: a boolean that allows you to specify a specific taxonomy vocabulary by its machine name (e.g., 'brands'). This will return an array of its terms. This is supported by JSON:API and graphql
• limit: a numeric value that lets you specify the number of terms returned. Note if withJsonAPI is true, it is recommended that you also use the jsonapi_extras module on your drupal installation to allow you to set the limit above the default maximum of 50 (if required).
• withHierarchy: a boolean flag that returns the taxonomy terms in with nested hierarchy as defined in the drupal. Without it, terms are returned as a flattened array. Hierarchy is supported by both JSON:API and graphql but can only be used when withVocabulary is set to true.
• additionalFields: an array or string values that contain additional fields that are not a part of the default gesso type definition for Tag. The additionalFields flag is only supported by graphql.

The tests for this module as well as the tests for Gesso CMS offer examples of how every hook works.