File downloading and processing capabilities with Gatsby Image CDN support for optimized image delivery, placeholder generation, and faster builds.
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:
public:, private:, s3:, etc.)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)
}
}
}
}
}
}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)typePrefix is usedGenerates 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" />;
};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:
https://example.com/files/image.jpg{ "url": "/files/image.jpg" }public://image.jpg, private://document.pdfConfigurable 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',
},
}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 configuredprivate: - Basic auth if configuredtemporary: - Basic auth if configuredUsage 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 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
},
}To optimize Image CDN performance, configure placeholder styles in Drupal:
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" }
}
}
}// 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 {};
}concurrentFileRequests (default: 20)requestTimeoutMS settingThe plugin supports various Drupal file systems:
| File System | URI Format | Authentication | Notes |
|---|---|---|---|
| Public | public://path/file.ext | Optional basic auth | Publicly accessible files |
| Private | private://path/file.ext | Basic auth supported | Access-controlled files |
| Temporary | temporary://path/file.ext | Basic auth supported | Temporary uploads |
| S3 | s3://bucket/path/file.ext | No auth applied | External S3 storage |
| External | https://cdn.example.com/file.ext | No auth applied | External URLs |
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;
}