skills.rest
drupal-canvas
drupal-canvasOFFICIAL
Explore all skills by this author →
GitHub

canvas-data-fetching

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

3|1|Updated Feb 11, 2026
Search Tags:#swr#drupal#data-fetching#jsonapi#relationship-handling#jsonapiclient
One-click install
npx skills add https://github.com/drupal-canvas/skills --skill canvas-data-fetching-drupal-canvas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-data-fetching
Source: https://github.com/drupal-canvas/skills/tree/main/skills/canvas-data-fetching
Command: npx skills add https://github.com/drupal-canvas/skills --skill canvas-data-fetching-drupal-canvas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers fetch and render Drupal content in Canvas components efficiently, reducing boilerplate while enabling consistent data handling with SWR and JSON:API patterns.

Core Features & Use Cases

  • SWR-based data fetching with caching, revalidation, and hook-based APIs for Drupal data.
  • Integration with JsonApiClient and DrupalJsonApiParams to build robust queries.
  • Relationship handling with addInclude and addFields to fetch related content without circular references.
  • Tools and patterns for building reusable content lists and dynamic filters in Canvas components.

Quick Start

Configure a component that fetches JSON:API data using JsonApiClient and SWR to render a list of Drupal nodes.

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 content with SWR in React components?▼

You can fetch Drupal content with SWR by integrating JsonApiClient and DrupalJsonApiParams to build queries, enabling hook-based APIs for caching and revalidation in Canvas components.

What is the best way to query related Drupal entities via JSON:API without circular references?▼

To query related Drupal entities without circular references, use addInclude and addFields with DrupalJsonApiParams to fetch specific relationship data efficiently without over-fetching.

Can I use SWR caching with Drupal JSON:API endpoints?▼

Yes, SWR caching integrates directly with Drupal JSON:API endpoints. This combination provides revalidation and hook-based data fetching while reducing boilerplate for consistent data handling.

How do I build reusable content lists with dynamic filters using Drupal JSON:API?▼

You can build reusable content lists with dynamic filters by applying JsonApiClient and DrupalJsonApiParams to construct queries, then rendering the JSON:API data using SWR hooks in Canvas components.

Why does fetching Drupal relationships result in circular references?▼

Fetching Drupal relationships causes circular references when querying without constraints. Applying addInclude and addFields restricts the JSON:API query scope, fetching related content efficiently and avoiding the issue.

Related Skills

Explore More Software Engineering Skills→
AJV009AJV009
1

canvas-data-fetching

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

Community
Intermediate
acquiaacquia
16

canvas-data-fetching

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

Official
Intermediate
balintbrewsbalintbrews
14

canvas-data-fetching

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

Community
Intermediate
sevenbelowllcsevenbelowllc

apollo-client

Integrate Apollo Client 4.x in React apps for GraphQL data management.

Official
Intermediate