---
alias: "fc.mutation.inline"
aliases:
  - fc.mutation.inline
category: action
module: Core
---

# fc.mutation.inline

Inline mutation card that auto-generates a form from a GraphQL mutation schema, renders it in a card, and submits the mutation on form submit.

## When to Use
- Display an inline editable form for a GraphQL mutation (e.g. `updateOrder`, `createFulfilment`)
- Build quick-edit cards that introspect the mutation schema to generate form fields automatically
- Provide inline update forms on detail pages without requiring a drawer or modal

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `title` | string | No | Card title displayed above the form |
| `width` | CardWidth | No | Card width on 12-column grid |
| `highlight` | string | No | Top border highlight color |
| `mutation` | MutationConfig | Yes | Mutation configuration object (see below) |

### MutationConfig Structure
| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `name` | string | Yes | GraphQL mutation name (e.g. `"updateOrder"`, `"createFulfilment"`) |
| `label` | string | Yes | Display label for the mutation action |
| `args` | Record<string, any> | No | Pre-filled argument values -- supports template strings `"{{id}}"` |
| `overrides` | Record<string, ExtendedFormField> | No | Per-field overrides for label, component, value, validation, etc. |
| `filter` | MutationFieldFilter | No | Include/exclude specific fields: `{ type: "include"\|"exclude", names: string[] }` |
| `postSubmit` | PostSubmitType | No | Action after successful submission (e.g. refresh page, navigate) |

## Data Binding
For update mutations, the component auto-generates a query from the mutation name (e.g. `updateOrder` -> `order` query) to pre-populate form fields. Template strings in `args` are resolved against the current data context.

## Descendants
No -- form fields are auto-generated from the GraphQL mutation schema.

## Composition Patterns
- `fc.page` > `fc.mutation.inline` for inline edit forms on detail pages
- `fc.column` > `fc.mutation.inline` alongside `fc.card.attribute` for view + edit layout
- For drawer-based mutations, use `fc.mutation.button` (MutationButton) instead

## Gotchas
- The `mutation.name` must exactly match a GraphQL mutation in the schema. The component introspects the schema via `getMutationInputArg()`.
- For `update` mutations (name starts with "update"), the component auto-fetches current entity data to pre-populate the form.
- Fields with pre-set values in `args` are hidden from the form (treated as locked values) and re-injected on submit.
- The `filter` prop allows include/exclude lists to control which fields appear in the generated form.
- `overrides` can customize individual field components, labels, default values, and validation rules.
- On submit, shows a loading overlay and calls `refreshPage()` after completion. Error toast appears on failure.
- Registered with category `content` in the component registry.

## Manifest Example
```json
{
  "component": "fc.mutation.inline",
  "props": {
    "title": "Update Order",
    "width": "half",
    "mutation": {
      "name": "updateOrder",
      "label": "Save Changes",
      "args": {
        "id": "{{id}}"
      },
      "filter": {
        "type": "include",
        "names": ["status", "type", "attributes"]
      },
      "overrides": {
        "type": {
          "label": "Order Type",
          "component": "fc.mutation.order.type"
        }
      }
    }
  }
}
```

## AI Parse Notes
- **Primary intent:** Declarative Mystique component definition for manifests.
- **Selection signals:** Match by `alias`, category, and required `Key Props`.
- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
- **Safety checks:** Validate required props and data bindings before manifest generation.
