Data fetching

Project type

Before applying this skill, check package.json for a dependency named @drupal-canvas/headless or starting with @drupal-canvas/headless-. If one is present, this is a Canvas Headless codebase — read canvas-headless first. In headless projects, fetch page trees with the SDK's fetchPage() and server-side content with its request-aware getClient(), using the framework's idiomatic data-loading path. Portable React components use useJsonApiClient() from drupal-canvas/react and the application's same-origin SDK proxy. The React patterns below work in Drupal, Workbench, and React-based headless frontends. For headless server prefetch and fallback rules, also follow canvas-headless; native non-React components use their framework's data-loading patterns, not React hooks. If no such dependency is present, this is a Canvas-rendered React codebase: components are React (index.jsx/.tsx) and everything in this skill applies as written. These are the only two project types.