CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-gatsby-source-drupal

Gatsby source plugin for building websites using the Drupal CMS as a data source

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

Gatsby Source Drupal

Gatsby Source Drupal is a source plugin that enables building websites using Drupal CMS as a headless data source. It connects to Drupal 8/9 sites through the JSON:API module to pull content, including images and structured data, into the Gatsby build process.

Package Information

  • Package Name: gatsby-source-drupal
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install gatsby-source-drupal

Core Imports

This is a Gatsby plugin, so it's configured in gatsby-config.js rather than imported directly:

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-drupal`,
      options: {
        baseUrl: `https://your-drupal-site.com/`,
        apiBase: `jsonapi`, // optional, defaults to `jsonapi`
      },
    },
  ],
}

Basic Usage

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-drupal`,
      options: {
        baseUrl: `https://live-contentacms.pantheonsite.io/`,
        apiBase: `api`,
        basicAuth: {
          username: process.env.BASIC_AUTH_USERNAME,
          password: process.env.BASIC_AUTH_PASSWORD,
        },
        skipFileDownloads: true,
        imageCDN: true,
        fastBuilds: true,
      },
    },
  ],
}

Query the sourced data in your components:

{
  allArticle {
    edges {
      node {
        title
        internalId
        created(formatString: "DD-MMM-YYYY")
      }
    }
  }
}

Architecture

Gatsby Source Drupal is built around several key components:

  • Plugin Hooks: Standard Gatsby plugin lifecycle hooks (sourceNodes, onPreBootstrap, etc.)
  • Data Normalization: Conversion of Drupal JSON:API data to Gatsby nodes with relationship handling
  • File Processing: Download and processing of Drupal files with optional Image CDN support
  • Incremental Builds: FastBuilds and webhook support for efficient development workflows
  • Language Support: Comprehensive multilingual content handling

Capabilities

Plugin Configuration

Core plugin configuration options for connecting to Drupal sites, authentication, performance tuning, and feature toggles.

interface PluginOptions {
  baseUrl: string;
  proxyUrl?: string;
  apiBase?: string;
  basicAuth?: { username: string; password: string };
  headers?: Record<string, string>;
  params?: Record<string, string>;
  filters?: Record<string, string>;
  concurrentFileRequests?: number;
  concurrentAPIRequests?: number;
  requestTimeoutMS?: number;
  disallowedLinkTypes?: string[];
  skipFileDownloads?: boolean;
  imageCDN?: boolean;
  typePrefix?: string;
  fastBuilds?: boolean;
  entityReferenceRevisions?: string[];
  secret?: string;
  languageConfig?: LanguageConfig;
  placeholderStyleName?: string;
}

Plugin Configuration

Data Sourcing and Node Creation

Main data sourcing functionality that fetches content from Drupal's JSON:API and creates Gatsby nodes with full relationship handling.

function sourceNodes(
  gatsbyApi: {
    actions: Actions;
    store: Store;
    cache: Cache;
    createNodeId: Function;
    createContentDigest: Function;
    getCache: Function;
    getNode: Function;
    getNodes: Function;
    parentSpan: Span;
    reporter: Reporter;
    webhookBody?: WebhookBody;
  },
  pluginOptions: PluginOptions
): Promise<void>;

Data Sourcing

File Handling and Image CDN

File downloading and processing capabilities with Gatsby Image CDN support for optimized image delivery and faster builds.

interface ImageCDNFields {
  filename: string;
  url: string;
  placeholderUrl: string;
  width: number;
  height: number;
  mimeType: string;
}

function downloadFile(
  gatsbyApi: {
    node: GatsbyNode;
    cache: Cache;
    createNode: Function;
    createNodeId: Function;
    getCache: Function;
  },
  pluginOptions: {
    basicAuth?: BasicAuth;
    baseUrl: string;
    typePrefix?: string;
  }
): Promise<void>;

File Handling

Incremental Builds and Webhooks

FastBuilds support and webhook handling for efficient development workflows and incremental content updates.

interface WebhookBody {
  secret?: string;
  action: 'insert' | 'update' | 'delete';
  data: DrupalEntity | DrupalEntity[];
}

function handleWebhookUpdate(
  gatsbyApi: WebhookGatsbyApi,
  pluginOptions: PluginOptions
): Promise<void>;

Incremental Builds

Multilingual Support

Comprehensive language and translation support for multilingual Drupal sites with configurable language handling.

interface LanguageConfig {
  defaultLanguage: string;
  enabledLanguages: (string | RenamedLangCode)[];
  filterByLanguages?: boolean;
  translatableEntities: string[];
  nonTranslatableEntities: string[];
}

interface RenamedLangCode {
  langCode: string;
  as: string;
}

Multilingual Support

Types

interface BasicAuth {
  username: string;
  password: string;
}

interface DrupalEntity {
  id: string;
  type: string;
  attributes: Record<string, any>;
  relationships?: Record<string, any>;
  links?: Record<string, any>;
  meta?: Record<string, any>;
}

interface GatsbyNode {
  id: string;
  parent: string | null;
  children: string[];
  internal: {
    type: string;
    contentDigest?: string;
    owner?: string;
  };
  [key: string]: any;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/gatsby-source-drupal@6.15.x
Publish Source
CLI
Badge
tessl/npm-gatsby-source-drupal badge