metabase-data-app-actions

Invokes Metabase actions from data apps using the useAction hook with typed parameters.

49.0k|6.8k|Updated Feb 2, 2015
One-click install
npx skills add https://github.com/metabase/metabase --skill metabase-data-app-actions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: metabase-data-app-actions
Source: https://github.com/metabase/metabase/tree/main/skills/metabase-data-app-actions
Command: npx skills add https://github.com/metabase/metabase --skill metabase-data-app-actions

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @metabase/embedding-sdk-react.

What problem does it solve?

Metabase data apps need to trigger server-defined write operations (inserts, updates, deletes, custom SQL) when users submit forms or click buttons, but wiring the useAction hook correctly — typed parameters, error rendering, and post-action data refresh — is error-prone and leaves UIs showing stale data.

Core Features & Use Cases

  • Typed action invocation: Calls actions via useAction with ActionParametersFromDataAppSchema and ActionKindFromDataAppSchema generics so parameter slugs and value types are checked at compile time.
  • Error surfacing: Renders error.data.message and per-field error.data.errors verbatim so users see actionable backend validation messages.
  • Post-action refresh discipline: Enforces refreshing every data view the action could have changed after execute resolves, preventing stale UI.
  • Use Case: Build an "Add Person" form in a Metabase data app that submits to a model's row/create action, disables the button while executing, shows field-level validation errors, and refreshes the people table on success.

Quick Start

Use the metabase-data-app-actions skill to wire a form in my data app to the create action on the people model with typed parameters and a refresh after submit.

Frequently Asked Questions about metabase-data-app-actions

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

FAQPage Schema
How do I trigger a Metabase action from a data app?▼

Call the useAction hook from @metabase/embedding-sdk-react with the action's numeric id from the schema, then invoke execute with a parameters object keyed by parameter slug. Actions only run when execute is called explicitly, never on mount.

How do I type action parameters in a Metabase data app?▼

Pass ActionParametersFromDataAppSchema and ActionKindFromDataAppSchema generics from @metabase/embedding-sdk-react/data-app to useAction. The helpers expand the schema's parameters list into a keyed object with required flags and jsType-based value types.

Why does my data app show stale data after an action succeeds?▼

Actions do not automatically refresh on-screen data. After execute resolves, you must call and await the refresh callbacks of every data view reading the mutated model, ideally with Promise.all when multiple refreshes apply.

How do I show Metabase action error messages in a form?▼

Read error.data.message for whole-request failures and error.data.errors keyed by parameter slug for per-field validation messages. Render them verbatim in an element with white-space pre-wrap since driver messages contain meaningful newlines.

Can I call the Metabase action API directly with fetch?▼

No. The data app sandbox blocks raw network calls to the Metabase origin; fetch and XHR only work for external allowed_hosts declared in data_app.yaml. The only path to actions is the useAction hook.

What validation should a Metabase action form enforce?▼

Only the required flag from the schema's parameter entries, wired to native input required attributes and checked via form checkValidity. Do not add length, format, or min/max checks; anything beyond required comes back as a backend error after submit.