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.