Devour/devour_data/docs/use-submissions.json

{
  "id": "cca4b56385490b9bf5f5d438",
  "source": "solid:signals",
  "type": "github-document",
  "title": "use-submissions",
  "content": "---\ntitle: useSubmissions\nuse_cases: \u003e-\n  multiple forms, submission history, batch operations, optimistic lists, error\n  recovery\ntags:\n  - forms\n  - submissions\n  - multiple\n  - history\n  - optimistic\n  - batch\nversion: '1.0'\ndescription: \u003e-\n  Manage multiple form submissions simultaneously with useSubmissions. Track\n  history, handle errors, and show optimistic updates.\n---\n\nThe `useSubmissions` primitive returns the state of all submissions for a given [action](/solid-router/concepts/actions).\n\n## Import\n\n```tsx\nimport { useSubmissions } from \"@solidjs/router\";\n```\n\n## Type\n\n```tsx\nfunction useSubmissions\u003cT extends Array\u003cany\u003e, U, V\u003e(\n  fn: Action\u003cT, U, V\u003e,\n  filter?: (input: V) =\u003e boolean\n): Submission\u003cT, NarrowResponse\u003cU\u003e\u003e[] \u0026 {\n    pending: boolean;\n};\n```\n\n## Parameters\n\n### `action`\n\n- **Type:** `Action\u003cT, U, V\u003e`\n- **Required:** Yes\n\nThe action to track.\n\n### `filter`\n\n- **Type:** `(input: V) =\u003e boolean`\n- **Required:** No\n\nA function that filters submissions.\nIt is executed for each submission in the order of creation.\nIt receives an array of the action's inputs as a parameter and must return `true` to select the submission or `false` otherwise.\n\n## Return value\n\n`useSubmissions` returns a reactive array of submission objects.\nEach submission object has the following properties:\n\n### `input`\n\nThe reactive input data of the action.\n\n### `result`\n\nA reactive value representing the successful return value of the action.\n\n### `error`\n\nA reactive value for any error thrown by the action.\n\n### `pending`\n\nA reactive boolean indicating if the action is currently running.\n\n### `clear`\n\nA function to clear the submission's state.\n\n### `retry`\n\nA function to re-execute the submission with the same input.\n\n## Examples\n\n### Basic usage\n\n```tsx\nimport { For, Show } from \"solid-js\";\nimport { action, useSubmissions } from \"@solidjs/router\";\n\nconst addTodoAction = action(async (formData: FormData) =\u003e {\n\t// ... Sends the todo data to the server.\n}, \"addTodo\");\n\nfunction AddTodoForm() {\n\tconst submissions = useSubmissions(addTodoAction);\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cform action={addTodoAction} method=\"post\"\u003e\n\t\t\t\t\u003cinput name=\"name\" /\u003e\n\t\t\t\t\u003cbutton type=\"submit\"\u003eAdd\u003c/button\u003e\n\t\t\t\u003c/form\u003e\n\t\t\t\u003cFor each={submissions}\u003e\n\t\t\t\t{(submission) =\u003e (\n\t\t\t\t\t\u003cdiv\u003e\n\t\t\t\t\t\t\u003cspan\u003eAdding \"{submission.input[0].get(\"name\")?.toString()}\"\u003c/span\u003e\n\t\t\t\t\t\t\u003cShow when={submission.pending}\u003e\n\t\t\t\t\t\t\t\u003cspan\u003e (pending...)\u003c/span\u003e\n\t\t\t\t\t\t\u003c/Show\u003e\n\t\t\t\t\t\t\u003cShow when={submission.result?.ok}\u003e\n\t\t\t\t\t\t\t\u003cspan\u003e (completed)\u003c/span\u003e\n\t\t\t\t\t\t\u003c/Show\u003e\n\t\t\t\t\t\t\u003cShow when={!submission.result?.ok}\u003e\n\t\t\t\t\t\t\t\u003cspan\u003e{` (Error: ${submission.result?.message})`}\u003c/span\u003e\n\t\t\t\t\t\t\t\u003cbutton onClick={() =\u003e submission.retry()}\u003eRetry\u003c/button\u003e\n\t\t\t\t\t\t\u003c/Show\u003e\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t)}\n\t\t\t\u003c/For\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n### Filtering submissions\n\n```tsx\nimport { useSubmissions } from \"@solidjs/router\";\n\nconst addTodoAction = action(async (formData: FormData) =\u003e {\n\t// ... Sends the todo data to the server.\n}, \"addTodo\");\n\nfunction FailedTodos() {\n\tconst failedSubmissions = useSubmissions(\n\t\taddTodoAction,\n\t\t([formData]: [FormData]) =\u003e {\n\t\t\t// Filters for submissions that failed a client-side validation\n\t\t\tconst name = formData.get(\"name\")?.toString() ?? \"\";\n\t\t\treturn name.length \u003c= 2;\n\t\t}\n\t);\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cp\u003eFailed submissions:\u003c/p\u003e\n\t\t\t\u003cFor each={failedSubmissions}\u003e\n\t\t\t\t{(submission) =\u003e (\n\t\t\t\t\t\u003cdiv\u003e\n\t\t\t\t\t\t\u003cspan\u003e{submission.input[0].get(\"name\")?.toString()}\u003c/span\u003e\n\t\t\t\t\t\t\u003cbutton onClick={() =\u003e submission.retry()}\u003eRetry\u003c/button\u003e\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t)}\n\t\t\t\u003c/For\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/use-submissions.mdx",
  "metadata": {
    "path": "src/routes/solid-router/reference/data-apis/use-submissions.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 3528,
    "source_type": "github"
  },
  "hash": "1eacb652777bb4b7df9be7b082da4601f89367b7913e55d547cf564fff142fe9",
  "timestamp": "2026-02-23T11:43:00.192851462+01:00"
}