skills.rest
acquia
acquiaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

canvas-data-fetching

Fetch Drupal JSON:API content with JsonApiClient and SWR caching.

16|6|Updated Feb 19, 2025
Search Tags:#canvas#swr#drupal#data-fetching#jsonapi#jsonapi-client#drupal-jsonapi-params
One-click install
npx skills add https://github.com/acquia/nebula --skill canvas-data-fetching-acquia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-data-fetching
Source: https://github.com/acquia/nebula/tree/main/.agents/skills/canvas-data-fetching
Command: npx skills add https://github.com/acquia/nebula --skill canvas-data-fetching-acquia

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Components in Canvas need reliable, performant access to Drupal content but fetching JSON:API data, handling related entities, and managing caching is error-prone and can produce circular references or excessive payloads. This Skill codifies patterns to fetch Drupal content safely with JsonApiClient and SWR while preserving loading, empty, and error states for real previews in Workbench.

Core Features & Use Cases

  • SWR-based fetching for caching, revalidation, and a simple hook API when building components that render remote content.
  • JsonApiClient + DrupalJsonApiParams patterns for constructing queries, includes, and field filters to limit payloads and avoid circular references.
  • Setup gate and validation to ensure CANVAS_SITE_URL and CANVAS_JSONAPI_PREFIX are configured before attempting live JSON:API requests, with fallbacks to static content for previews.
  • Use Case: Build a news listing that sorts by created date, includes category and image relationships, and limits fields to only title, created, and image URL.

Quick Start

Build a Canvas component that uses JsonApiClient and SWR to fetch a paginated list of articles from my Drupal site's JSON:API, include category and image relationships, and limit fields to only those required for the list view.

Frequently Asked Questions about canvas-data-fetching

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fetch Drupal JSON:API content in Canvas components?▼

To fetch Drupal JSON:API content in Canvas components, use JsonApiClient with DrupalJsonApiParams to construct queries and SWR for client caching. This pattern ensures safe data fetching while maintaining loading and error states for Workbench previews.

What environment variables are required for Drupal data fetching in Canvas?▼

Drupal data fetching in Canvas requires CANVAS_SITE_URL and CANVAS_JSONAPI_PREFIX configured in your .env file. A setup gate validates these variables before attempting live JSON:API requests, falling back to static content if missing.

How do I avoid circular references when querying related entities via JSON:API?▼

To avoid circular references in JSON:API queries, use DrupalJsonApiParams to carefully select specific includes and limit fields to only those required. Restricting fields prevents excessive payloads and circular relationship loading.

Does SWR work with Drupal JSON:API for caching in Canvas Code Components?▼

SWR works with Drupal JSON:API in Canvas Code Components by providing caching, revalidation, and a simple hook API. It enables reliable content rendering with proper loading, empty, and error states for real previews.

What's the best way to build a Drupal content list with relationship queries in Canvas?▼

The best way to build a Drupal content list in Canvas is combining JsonApiClient, DrupalJsonApiParams, and SWR. Use DrupalJsonApiParams for sorting and relationship includes, limit fields to reduce payload, and SWR for caching.

Related Skills

Explore More Software Engineering Skills→
AJV009AJV009
1

canvas-component-upload

Upload validated Canvas components to Drupal Canvas with retry logic.

Community
Intermediate
drupal-canvasdrupal-canvas
3

canvas-data-fetching

Fetch and render Drupal content in Canvas components using JSON:API and SWR.

Official
Intermediate
AJV009AJV009
1

canvas-data-fetching

Fetch and render Drupal content lists in Canvas components using JSON:API and SWR.

Community
Intermediate
balintbrewsbalintbrews
14

canvas-data-fetching

Fetch Drupal content for Canvas components using JSON:API and SWR.

Community
Intermediate