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

file-handling.mddocs/

File Handling

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

Capabilities

File Download Function

Downloads files from Drupal and creates local Gatsby file nodes with authentication support.

/**
 * Downloads files from Drupal and creates local file nodes
 * @param gatsbyApi - Gatsby API functions for node and cache management
 * @param pluginOptions - Plugin configuration including auth and URL settings
 * @returns Promise that resolves when file download is complete
 */
function downloadFile(
  gatsbyApi: {
    node: GatsbyNode;
    cache: Cache;
    createNode: Function;
    createNodeId: Function;
    getCache: Function;
  },
  pluginOptions: {
    basicAuth?: BasicAuth;
    baseUrl: string;
    typePrefix?: string;
  }
): Promise<void>;

The function handles:

  • File type detection from URI prefixes (public:, private:, s3:, etc.)
  • Authentication for protected file systems
  • Remote file node creation with proper metadata
  • Local file reference creation (node.localFile___NODE)

Usage Examples:

// Files are automatically downloaded during the build process
// Access downloaded files in GraphQL queries:

{
  allFile {
    nodes {
      name
      extension
      publicURL
      childImageSharp {
        gatsbyImageData(width: 300)
      }
    }
  }
}

// Access files through content relationships:
{
  allArticle {
    nodes {
      title
      featuredImage {
        localFile {
          childImageSharp {
            gatsbyImageData(width: 800)
          }
        }
      }
    }
  }
}

File Node Detection

Utility function to identify file nodes among all node types.

/**
 * Checks if a node is a file node type
 * @param node - Gatsby node to check
 * @param typePrefix - Optional type prefix for custom naming
 * @returns Boolean indicating if the node represents a file
 */
function isFileNode(node: GatsbyNode, typePrefix?: string): boolean;

Recognizes these file node types:

  • files (Drupal 7 compatibility)
  • file--file (Drupal 8/9 JSON:API format)
  • Prefixed versions when typePrefix is used

Gatsby Image CDN Integration

Generates Image CDN fields for optimized image processing and delivery.

/**
 * Generates Gatsby Image CDN fields for image nodes
 * @param options - Configuration for Image CDN field generation
 * @returns Promise resolving to Image CDN fields or empty object
 */
function getGatsbyImageCdnFields(options: {
  node: DrupalEntity;
  type: string;
  pluginOptions: PluginOptions;
  fileNodesExtendedData: Map<string, any>;
  reporter: Reporter;
}): Promise<ImageCDNFields | {}>;

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

Usage Examples:

// When Image CDN is enabled, query using the gatsbyImage field:
{
  allFile(filter: { mimeType: { regex: "/image/" } }) {
    nodes {
      gatsbyImage(width: 800, height: 600)
      filename
      url
    }
  }
}

// In React components:
import { GatsbyImage, getImage } from "gatsby-plugin-image";

const MyComponent = ({ data }) => {
  const image = getImage(data.file);
  return <GatsbyImage image={image} alt="Description" />;
};

File URL Resolution

Handles different Drupal file URI formats and resolves them to absolute URLs.

/**
 * Resolves Drupal file URIs to absolute URLs
 * @param node - File node attributes from Drupal
 * @param baseUrl - Base URL of the Drupal site
 * @returns URL object with resolved file location
 */
function getFileUrl(node: FileAttributes, baseUrl: string): URL;

interface FileAttributes {
  url?: string;
  uri?: string | { url: string; value: string };
}

Handles these URI formats:

  • Direct URLs: https://example.com/files/image.jpg
  • JSON:API 2.x format: { "url": "/files/image.jpg" }
  • Drupal stream wrappers: public://image.jpg, private://document.pdf

Image Placeholder Support

Configurable placeholder image support for faster loading and better user experience.

interface ImageCDNState {
  foundPlaceholderStyle: boolean;
  hasLoggedNoPlaceholderStyle: boolean;
}

/**
 * Global state tracking for Image CDN placeholder discovery
 */
const imageCDNState: ImageCDNState;

Usage Examples:

// Configure placeholder style in plugin options:
{
  resolve: `gatsby-source-drupal`,
  options: {
    baseUrl: `https://your-site.com/`,
    skipFileDownloads: true,
    imageCDN: true,
    placeholderStyleName: 'placeholder', // Default
    // Or use custom style:
    // placeholderStyleName: 'custom_placeholder',
  },
}

Authentication for File Downloads

Supports authentication for accessing protected files in different Drupal file systems.

interface FileAuthOptions {
  htaccess_user?: string;
  htaccess_pass?: string;
}

Supported file systems for authentication:

  • public: - Basic auth if configured
  • private: - Basic auth if configured
  • temporary: - Basic auth if configured
  • External URLs - No auth applied

Usage Examples:

{
  resolve: `gatsby-source-drupal`,
  options: {
    baseUrl: `https://protected-site.com/`,
    basicAuth: {
      username: process.env.BASIC_AUTH_USERNAME,
      password: process.env.BASIC_AUTH_PASSWORD,
    },
    // Files in public://, private://, temporary:// will use basic auth
  },
}

Image CDN Setup and Configuration

Enabling Image CDN

Image CDN is enabled by default but requires skipFileDownloads: true to function:

{
  resolve: `gatsby-source-drupal`,
  options: {
    baseUrl: `https://your-site.com/`,
    skipFileDownloads: true, // Required for Image CDN
    imageCDN: true, // Default, but can be explicit
  },
}

Drupal Configuration for Placeholders

To optimize Image CDN performance, configure placeholder styles in Drupal:

  1. Install the Consumer Image Styles module
  2. Create a "Placeholder" image style (20px width/height scale effect)
  3. Configure JSON:API Resource Overrides for image fields
  4. Add placeholder style to the default consumer
  5. Clear Drupal cache

Image Dimensions and Metadata

The plugin automatically extracts image dimensions and derivative URLs from entity relationships:

// Extended file data extracted from relationships:
{
  width: 1920,
  height: 1080,
  imageDerivatives: {
    links: {
      placeholder: { href: "/files/styles/placeholder/image.jpg" },
      thumbnail: { href: "/files/styles/thumbnail/image.jpg" },
      large: { href: "/files/styles/large/image.jpg" }
    }
  }
}

Error Handling and Resilience

File Access Errors

// 404 errors are handled gracefully with limited warnings
if (e.message.includes('404') && four04WarningCount < 10) {
  four04WarningCount++;
  reporter.warn(`[gatsby-source-drupal] file returns 404: ${url}`);
  return {};
}

// Corrupt file detection
if (e.message.includes('unrecognized file format') && corruptFileWarningCount < 10) {
  corruptFileWarningCount++;
  reporter.warn(`[gatsby-source-drupal] Encountered corrupt file: ${url}`);
  return {};
}

Performance Considerations

  • Concurrent Downloads: Configurable via concurrentFileRequests (default: 20)
  • Timeout Handling: Files respect the requestTimeoutMS setting
  • Memory Management: Files are streamed rather than loaded into memory
  • CDN Benefits: Image CDN reduces build time by skipping file processing

File System Support

The plugin supports various Drupal file systems:

File SystemURI FormatAuthenticationNotes
Publicpublic://path/file.extOptional basic authPublicly accessible files
Privateprivate://path/file.extBasic auth supportedAccess-controlled files
Temporarytemporary://path/file.extBasic auth supportedTemporary uploads
S3s3://bucket/path/file.extNo auth appliedExternal S3 storage
Externalhttps://cdn.example.com/file.extNo auth appliedExternal URLs

Types

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

interface FileNode extends GatsbyNode {
  filename: string;
  filemime: string;
  filesize: number;
  uri: string | { url: string; value: string };
  url: string;
  localFile___NODE?: string;
}

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