mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
4.3 KiB
JSON
17 lines
4.3 KiB
JSON
{
|
|
"id": "df31399bf8d89aed850a8a2a",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "use-submission",
|
|
"content": "---\ntitle: useSubmission\nuse_cases: \u003e-\n form feedback, pending states, optimistic updates, error handling, single\n submission tracking\ntags:\n - forms\n - submissions\n - pending\n - optimistic\n - errors\n - feedback\nversion: '1.0'\ndescription: \u003e-\n Track form submission states with useSubmission. Handle pending feedback,\n optimistic updates, and errors for single forms.\n---\n\nThe `useSubmission` primitive returns the state of the _most recent_ submission for a given [action](/solid-router/concepts/actions).\n\n## Import\n\n```tsx\nimport { useSubmission } from \"@solidjs/router\";\n```\n\n## Type\n\n```tsx\nfunction useSubmission\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 | SubmissionStub;\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.\nThe first submission that passes the filter is returned by `useSubmission`.\n\n## Return value\n\n`useSubmission` returns a reactive object with the following properties:\n\n### `input`\n\nA reactive value representing the 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 representing 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 { Show } from \"solid-js\";\nimport { action, useSubmission } from \"@solidjs/router\";\n\nconst addTodoAction = action(async (formData: FormData) =\u003e {\n\tconst name = formData.get(\"name\")?.toString();\n\n\tif (!name || name.length \u003c= 2) {\n\t\treturn { ok: false, message: \"Name must be larger than 2 characters.\" };\n\t}\n\n\t// ... Sends the todo data to the server.\n\n\treturn { ok: true };\n}, \"addTodo\");\n\nfunction AddTodoForm() {\n\tconst submission = useSubmission(addTodoAction);\n\n\treturn (\n\t\t\u003cform action={addTodoAction} method=\"post\"\u003e\n\t\t\t\u003cinput name=\"name\" /\u003e\n\t\t\t\u003cbutton type=\"submit\"\u003e{submission.pending ? \"Adding...\" : \"Add\"}\u003c/button\u003e\n\t\t\t\u003cShow when={!submission.result?.ok}\u003e\n\t\t\t\t\u003cdiv\u003e\n\t\t\t\t\t\u003cp\u003e{submission.result.message}\u003c/p\u003e\n\t\t\t\t\t\u003cbutton onClick={() =\u003e submission.clear()}\u003eClear\u003c/button\u003e\n\t\t\t\t\t\u003cbutton onClick={() =\u003e submission.retry()}\u003eRetry\u003c/button\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/Show\u003e\n\t\t\u003c/form\u003e\n\t);\n}\n```\n\n### Filtering submissions\n\n```tsx\nimport { useSubmission } from \"@solidjs/router\";\n\nconst addTodoAction = action(async (formData: FormData) =\u003e {\n\t// ... Sends the todo data to the server.\n}, \"addTodo\");\n\nfunction LatestTodo() {\n\tconst latestValidSubmission = useSubmission(\n\t\taddTodoAction,\n\t\t([formData]: [FormData]) =\u003e {\n\t\t\tconst name = formData.get(\"name\")?.toString();\n\t\t\treturn name \u0026\u0026 name.length \u003e 2;\n\t\t}\n\t);\n\n\treturn \u003cp\u003eLatest valid submission: {latestValidSubmission.result}\u003c/p\u003e;\n}\n```",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/use-submission.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/solid-router/reference/data-apis/use-submission.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 3214,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "86ebeae8e5e1cf241763d3ae03ee92bc56225fa42901a0191497345bd8988be5",
|
|
"timestamp": "2026-02-23T11:43:00.192817448+01:00"
|
|
} |