skills.rest
AJV009
AJV009COMMUNITY
Explore all skills by this author →
Website𝕏@alphons009GitHub

canvas-data-fetching

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

1|Updated Mar 22, 2026
Search Tags:#components#canvas#relationships#swr#drupal#data-fetching#json-api
One-click install
npx skills add https://github.com/AJV009/drupal-devkit --skill canvas-data-fetching
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-data-fetching
Source: https://github.com/AJV009/drupal-devkit/tree/main/plugins/migrate-drupal-canvas/reference/canvas-starter/canvas-data-fetching
Command: npx skills add https://github.com/AJV009/drupal-devkit --skill canvas-data-fetching

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Fetching and rendering Drupal content in Canvas components can be complex, requiring repeated setup for JSON:API queries, caching, and relationship handling. This skill provides a cohesive pattern to fetch, cache, and render content lists using SWR and the Drupal JSON:API.

Core Features & Use Cases

  • SWR-based data fetching for caching, revalidation, and responsive UIs
  • JSON:API querying with JsonApiClient and DrupalJsonApiParams for building complex queries
  • Relationship includes and field filtering to fetch related content in a single request
  • Use Case: render a dynamic list of articles with related images and categories that updates as data changes

Quick Start

Create a Canvas component that retrieves Drupal content using JSON:API via JsonApiClient and SWR and renders it in a list.

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 and render Drupal content in Canvas components?▼

Fetch Drupal content in Canvas using SWR patterns combined with JsonApiClient and DrupalJsonApiParams to query JSON:API endpoints, enabling client-side caching and dynamic UI updates for content lists like articles or events.

How does SWR handle Drupal JSON:API relationship includes?▼

SWR handles Drupal JSON:API relationship includes by leveraging JsonApiClient support for the addInclude function, fetching related content alongside primary data in a single request for efficient rendering.

What is the best way to minimize payload size when fetching Drupal JSON:API data?▼

Minimize payload size when fetching Drupal JSON:API data by applying field filtering via the addFields function, ensuring only necessary fields are retrieved from the server for your Canvas component lists.

Can I use DrupalJsonApiParams with SWR for caching in Canvas projects?▼

Yes, you can use DrupalJsonApiParams with SWR for caching in Canvas projects. This combination provides revalidation and responsive UIs while building complex JSON:API queries to power dynamic content lists.

Does this approach support building dynamic article lists with related images?▼

Yes, this approach supports building dynamic article lists with related images and categories. It uses SWR for revalidation and JSON:API relationship includes to fetch related media in a single request, updating as data changes.

Related Skills

Explore More Software Engineering Skills→
drupal-canvasdrupal-canvas
3

canvas-data-fetching

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

Official
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
Unique-DivineUnique-Divine
6

sai-keeper-graphql

Query the Sai GraphQL API for trading data, liquidity, and analytics on Nibiru Chain.

Community
Advanced