or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mddata-sourcing.mdfile-handling.mdincremental-builds.mdindex.mdmultilingual.md
tile.json

tessl/npm-gatsby-source-drupal

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/gatsby-source-drupal@6.15.x

To install, run

npx @tessl/cli install tessl/npm-gatsby-source-drupal@6.15.0

index.mddocs/

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;
}