Form actions by dummdidumm · Pull Request #6469 · sveltejs/kit

dummdidumm · 2022-08-31T14:30:27Z

How to migrate

The POST/PUT/PATCH/DELETE methods on +page.server.js are replaced by an actions object.

If you used those methods for form submissions

Step 0 (before updating)

Remove method overrides from your svelte.config.js (they have been removed, see the other steps on how to migrate) - there have been reports that running npm install after bumping the version with this config still present fails.

// svelte.config.js
const config = {
  kit: {
-    methodOverride: {
-      allowed: ['PATCH', 'DELETE']
-    }
}

Step 1

If you have more than one form on that page, think about names that best describe it and add these names as keys to the new action object inside +page.server.js. Example:

// +page.server.js
/** @type {import('./$types').Actions} */
export const actions = {
  addTodo: () => {},
  editTodo: () => {}
};

If you only have one form, you don't need to give it a name, use default:

// +page.server.js
/** @type {import('./$types').Actions} */
export const actions = {
  default: () => {}
};

Step 2

Move your methods over to the respective names of the actions object. Adjust the return value accordingly:

If you redirect, replace return { location: 'X' } with throw redirect(303, 'X')
If you return errors replace return { status: 400, errors: errors } with return fail(400, errors) (return invalid(400, errors) if you are not migrating to the latest version of SvelteKit directly)
In case of a success you can now also return arbitrary data if you want (it needs to be a JSON-stringifiable object)

// +page.server.js
+ import { redirect, fail } from '@sveltejs/kit';

- export async function POST({ request }) {
+export const actions = {
+  default: async ({ request }) => {
      const values = await request.formData();
 
      const username = /** @type {string} */ (values.get('username'));
      const password = /** @type {string} */ (values.get('password'));
 
      const user = await db.findUser(username);
 
      if (!user) {
-        return {
-          status: 403,
-          errors: {
-            username: 'No user with this username'
-          }
-        };
+        return fail(403, { username: 'No user with this username' });
      }
 
-      return {
-        location: '/'
-      };
+      throw redirect(303, '/');
    }
+};

The success response and invalid response both become available on export let forms (see step 4 for more info).

Step 3

Update your <form> elements in +page.svelte (or components used by it), if you were previously using PUT/PATCH/DELETE and are now using named actions:

// +page.svelte
-<form method="POST" action="/todos?_method=PATCH">
+<form method="POST" action="?/editTodo">

The /editTodo is a normal query parameter. SvelteKit interprets a query parameter with a leading / as identifying a named action. ?/editTodo will call the editTodo action in export const actions = { editTodo: ..., ... }

Step 4

Replace export let errors with export let form in +page.svelte:

// +page.svelte
-/** @type {import('./$types').Errors} */
-export let errors;
+/** @type {import('./$types').ActionData} */
+export let form;

This will contain the return value of the action that just ran (as long as it didn't error or redirect), allowing you to show a 'success' message or (in the case of validation errors) fill in previously submitted values and indicate which fields were invalid.

Example:

This from the server..

// +page.server.js
export const actions = {
  default: () => {
    //...
    if (somethingNotRight) {
      return invalid(400, { error: 'wrong' };
    } else {
      return { success: 'right' };
    }
  }
};

... will become available on the component:

<script>
  export let form; // <- will be { success: 'right' } or { error: 'wrong' }
</script>

If you used those methods for something else

Either adjust your urls and only make POST requests with FormData to it, ot move these methods over to a +server.js file. We will very soon make it possible to colocate a +server.js file next to a +page.svelte file. The return value needs to be a Response object; you can use the json helper method to make creation of that easier.

Manually making the fetch requests

use:enhance should do all of this for you. If you're on the latest version of SvelteKit and want to do it, see #7494 on how.

PR description

Implements #5875
Closes #3533

TODO

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
This message body should clearly illustrate what problems it solves.
Ideally, include a test that fails without this PR but passes with it.

Tests

Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

changeset-bot · 2022-08-31T14:30:31Z

🦋 Changeset detected

Latest commit: f2cdab2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
create-svelte	Patch
@sveltejs/kit	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

packages/kit/src/runtime/control.js

packages/kit/src/exports/index.js

packages/kit/src/runtime/control.js

packages/kit/src/runtime/server/page/actions.js

dummdidumm · 2022-09-06T15:39:27Z

You throw and error, you return invalid. The reasons are given in a discussion above (you need to show all the hidden items; stupid GitHub)

rowantrollope · 2022-09-06T20:36:14Z

Tried the upgrade to 472 this morning got the following error.

This is a large project with many routes. Also had problem with the last install script failing, but I was able to migrate successfully manually. The problem here is that the install fails and rolls-back to the previous build. Any suggestions?
Do I need to go upgrade the method overrides and so on BEFORE installing 472?

Error: Method overrides have been removed in favor of actions. See the PR for more information: #6469
at file:///Users/rtrollope/git/bookjournal/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.472_tqsk4he7hsj5ptovw3sfpzsuyu/node_modules/@sveltejs/kit/src/core/config/options.js:487:10
at file:///Users/rtrollope/git/bookjournal/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.472_tqsk4he7hsj5ptovw3sfpzsuyu/node_modules/@sveltejs/kit/src/core/config/options.js:379:43
at file:///Users/rtrollope/git/bookjournal/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.472_tqsk4he7hsj5ptovw3sfpzsuyu/node_modules/@sveltejs/kit/src/core/config/options.js:365:18
at file:///Users/rtrollope/git/bookjournal/node_modules/.pnpm/@sveltejs+kit@1.0.0-

dummdidumm · 2022-09-06T20:40:22Z

How do you run the install? Just npm install? Do you have a postinall or another post-install npm hook in your package.json by any chance? If so, try removing that temporarily and try again.

rowantrollope · 2022-09-06T22:01:06Z

I ran pnpm I @sveltejs/kit@latest... My Package.json looks as follows:

{
"name": "xy",
"version": "0.1.0",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"package": "vite package",
"preview": "vite preview",
"check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
},
"devDependencies": {
"@rgossiaux/svelte-headlessui": "^1.0.2",
"@rgossiaux/svelte-heroicons": "^0.1.2",
"@sveltejs/adapter-auto": "^1.0.0-next.66",
"@sveltejs/kit": "1.0.0-next.463",
"@tailwindcss/typography": "^0.5.4",
"@types/cookie": "^0.5.1",
"@types/dotenv-flow": "^3.2.0",
"@zerodevx/svelte-toast": "^0.7.2",
"autoprefixer": "^10.4.8",
"firebase": "^9.9.3",
"picmo": "^5.6.1",
"postcss": "^8.4.16",
"prettier": "^2.7.1",
"prettier-plugin-svelte": "^2.5.0",
"svelte": "^3.50.0",
"svelte-check": "^2.9.0",
"svelte-loading-spinners": "^0.1.7",
"svelte-preprocess": "^4.10.7",
"tailwindcss": "^3.1.8",
"tslib": "^2.3.1",
"typescript": "^4.8.2",
"vite": "3.1.0-beta.1"
},
"type": "module",
"dependencies": {
"@fontsource/fira-mono": "^4.5.9",
"@lukeed/uuid": "^2.0.0",
"@node-redis/search": "^1.0.5",
"@popperjs/core": "^2.11.6",
"@sveltejs/adapter-vercel": "1.0.0-next.72",
"@tailwindcss/line-clamp": "^0.4.0",
"amazon-paapi": "^1.0.6",
"cloudinary-core": "^2.13.0",
"colorthief": "^2.3.2",
"cookie": "^0.5.0",
"dayjs": "^1.11.5",
"devalue": "3",
"dotenv-flow": "^3.2.0",
"firebase-admin": "^10.2.0",
"redis": "^4.3.0",
"sass": "^1.54.8",
"svelte-gestures": "^1.4.1",
"svelte-popperjs": "^1.3.1",
"svelte-tags-input": "^3.0.0"
}
}

twobitunicorn · 2022-09-06T23:26:32Z

@dummdidumm Thanks! I'll get working through them.

twobitunicorn · 2022-09-07T00:15:46Z

@rowantrollope Check your svelte.config.js and make sure you are no longer adding the method overrides for PATCH and DELETE. The snippet below is possibly what you have if you have an older project (as I did!).

// Override http methods
methodOverride: {
    allowed: ['PATCH', 'DELETE']
}

rowantrollope · 2022-09-07T00:37:21Z

FIXED! That was it. Thank you VERY much Rowan Sent via Superhuman ( ***@***.*** )

…

On Tue, Sep 06, 2022 at 5:15 PM, twobitunicorn < ***@***.*** > wrote: @ rowantrollope ( https://github.com/rowantrollope ) Check your svelte.config.js and make sure you are no longer adding the method overrides for PATCH and DELETE . The snippet below is possibly what you have if you have an older project (as I did!). // Override http methods methodOverride: { allowed: ['PATCH', 'DELETE'] } — Reply to this email directly, view it on GitHub ( #6469 (comment) ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/ACXKL5PJBFWHAGVVQHEU3Q3V47ND3ANCNFSM6AAAAAAQBN573Y ). You are receiving this because you were mentioned. Message ID: <sveltejs/kit/pull/6469/c1238770516 @ github. com>

tsukhu · 2022-09-07T04:11:38Z

Upgraded to form actions for the login screen . This is a really nice feature
From the form post to processing of the action is there a way or a hook to know the current state of the server (for example - form submitted, action is in progress etc.)
Some way to show the button spinner icon to know something is going on.

dummdidumm · 2022-09-07T06:24:42Z

You can provide your own callback to the enhance action and set a variable to pending during fetching. When the return callback function is called you know the fetch is done.

dimplast · 2022-09-07T10:15:30Z

in docs
Anatomy of an action

in file:
src/routes/login/+page.svelte

<script>
export let data;
export let form;
</script>

{#if form?.success}
<p>Successfully logged in! Welcome back, {data.user.name}</p>
{/if}

Should we write?

{#if form?.success}
<p>Successfully logged in! Welcome back, {form.user.name}</p>
{/if}

export let data; is necessary

psytrx · 2022-09-07T10:55:14Z

export let data; is necessary

Ooh, that likely explains why my experiments did not work as expected (and also #6611). I was wondering whether forms is typed automatically. Having seen the incredible typing magic by @dummdidumm I assume it is, and that's probably why we return validation errors instead of throwing them?

vipero07 · 2022-09-08T14:05:53Z

@rowantrollope Check your svelte.config.js and make sure you are no longer adding the method overrides for PATCH and DELETE. The snippet below is possibly what you have if you have an older project (as I did!).
// Override http methods
methodOverride: {
    allowed: ['PATCH', 'DELETE']
}

This should be mentioned in the migration guide.

rowantrollope · 2022-09-08T14:28:31Z

Yes that was it, and that fixed it! Thanks Sent via Superhuman iOS ( ***@***.*** )

…

On Thu, Sep 8 2022 at 7:06 AM, vipero07 < ***@***.*** > wrote: > > > @rowantrollope ( https://github.com/rowantrollope ) Check your svelte.config.js > and make sure you are no longer adding the method overrides for PATCH and DELETE > . The snippet below is possibly what you have if you have an older project > (as I did!). > > // Override http methods > methodOverride: { > allowed: ['PATCH', > 'DELETE'] > } > This should be mentioned in the migration guide. — Reply to this email directly, view it on GitHub ( #6469 (comment) ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/ACXKL5KPCKIZXKCNE5XSTWLV5HXE7ANCNFSM6AAAAAAQBN573Y ). You are receiving this because you were mentioned. Message ID: <sveltejs/kit/pull/6469/c1240765956 @ github. com>

ghost · 2022-09-13T07:40:03Z

So what about array-data inside my form?
Given a form to edit e.g. a product category with multiple names in different languages. The names are inside an input field inside an #each block.
How can the actions method get the different values form the input fields?

ghost · 2022-09-13T09:47:58Z

Ok, got it. FormData.getAll().

j2l · 2022-10-13T11:17:58Z

Does <p>Successfully logged in! Welcome back, {data.user.name}</p> work for you?
On success, data={} right?

dlamon1 · 2022-12-16T02:31:28Z

Step 2 should import fail, not invalid

feynmanliang · 2022-12-19T23:44:37Z

May want to address JSON POST endpoints for the conversion guide? In my case I needed to use devalue.parse((await response.json()).data) to restore the original response.json() shape.

dummdidumm · 2022-12-20T09:44:16Z

See #7494 for that, I added a note to the migration description

dummdidumm added 2 commits August 31, 2022 15:17

basic actions method

1c3ba7a

add form store

9ac19bc

vercel bot deployed to Preview – kit August 31, 2022 14:30 View deployment

vercel bot deployed to Preview – kit-svelte-dev August 31, 2022 14:31 View deployment

dummdidumm added 2 commits August 31, 2022 18:17

remove export let errors in favor of form store

7b71fa3

make actions an object

d880096

vercel bot deployed to Preview – kit August 31, 2022 20:01 View deployment

vercel bot deployed to Preview – kit-svelte-dev August 31, 2022 20:02 View deployment

Rich-Harris reviewed Aug 31, 2022

View reviewed changes

dummdidumm added 2 commits September 1, 2022 12:49

implement FilesFormData

102851b

restrict values type, fix conversion, switch argument order

e650cb3

vercel bot deployed to Preview – kit September 1, 2022 11:07 View deployment

vercel bot deployed to Preview – kit-svelte-dev September 1, 2022 11:08 View deployment

Merge branch 'master' into form-actions

678361d

vercel bot deployed to Preview – kit September 1, 2022 11:09 View deployment

vercel bot deployed to Preview – kit-svelte-dev September 1, 2022 11:10 View deployment

validation->invalid

5ece9c0

vercel bot deployed to Preview – kit September 1, 2022 11:11 View deployment

vercel bot deployed to Preview – kit-svelte-dev September 1, 2022 11:12 View deployment

start writing docs

9c9dfbe

vercel bot deployed to Preview – kit September 1, 2022 12:33 View deployment

vercel bot had a problem deploying to Preview – kit-svelte-dev September 1, 2022 12:33 Failure

dummdidumm added 2 commits September 1, 2022 15:55

implement handleFile

b11c578

fix tests

3450eb4

vercel bot deployed to Preview – kit September 1, 2022 13:59 View deployment

vercel bot had a problem deploying to Preview – kit-svelte-dev September 1, 2022 13:59 Failure

test for files

38a253c

vercel bot deployed to Preview – kit September 1, 2022 15:48 View deployment

vercel bot had a problem deploying to Preview – kit-svelte-dev September 1, 2022 15:48 Failure

jeppech mentioned this pull request Sep 8, 2022

Type ActionData is unknown in TypeScript, but correct in JavaScript in VSCode #6668

Closed

This was referenced Sep 9, 2022

Migrate to new actions (replacement for POST, PUT, PATCH and DELETE) NickRTR/Syntype#13

Closed

Migrate to new actions (replacement for POST, PUT, PATCH and DELETE) NickRTR/Schoppy#36

Closed

jmagrippis mentioned this pull request Sep 15, 2022

⬆️ refactors for Form Actions and server hooks jmagrippis/techy-cat#21

Merged

Gunther-Schulz mentioned this pull request Sep 18, 2022

Implement Actions for forms as expected for 1.0.0-next.484 joysofcode/sveltekit-for-beginners#3

Merged

captaindirgo mentioned this pull request Sep 25, 2022

Updated README.md and svelte.config.js for example lucia-auth/lucia#98

Merged

This was referenced Sep 26, 2022

Update/sveltekit breaking changes migration mike-diff/realworld#1

Merged

Update/sveltekit breaking changes migration sveltejs/realworld#137

Closed

linear bot mentioned this pull request Oct 20, 2022

Guscuddy/mar 351 upgrade sveltekit and lucia gcuddy/margins#21

Merged

dummdidumm mentioned this pull request Mar 27, 2023

Confused by migration guide. Are DELETE and other actions still valid inside +page.server.js? #9523

Closed

sillvva mentioned this pull request Sep 6, 2025

Method overrides #1046

Closed

Uh oh!

Conversation

dummdidumm commented Aug 31, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to migrate

If you used those methods for form submissions

Step 0 (before updating)

Step 1

Step 2

Step 3

Step 4

If you used those methods for something else

Manually making the fetch requests

PR description

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

Tests

Changesets

Uh oh!

changeset-bot bot commented Aug 31, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dummdidumm commented Sep 6, 2022

Uh oh!

rowantrollope commented Sep 6, 2022

Uh oh!

dummdidumm commented Sep 6, 2022

Uh oh!

rowantrollope commented Sep 6, 2022

Uh oh!

twobitunicorn commented Sep 6, 2022

Uh oh!

twobitunicorn commented Sep 7, 2022

Uh oh!

rowantrollope commented Sep 7, 2022 via email

Uh oh!

tsukhu commented Sep 7, 2022

Uh oh!

dummdidumm commented Sep 7, 2022

Uh oh!

dimplast commented Sep 7, 2022

Uh oh!

psytrx commented Sep 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vipero07 commented Sep 8, 2022

Uh oh!

rowantrollope commented Sep 8, 2022 via email

Uh oh!

ghost commented Sep 13, 2022

Uh oh!

ghost commented Sep 13, 2022

Uh oh!

j2l commented Oct 13, 2022

Uh oh!

dlamon1 commented Dec 16, 2022

Uh oh!

feynmanliang commented Dec 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dummdidumm commented Dec 20, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

15 participants

dummdidumm commented Aug 31, 2022 •

edited

Loading

changeset-bot bot commented Aug 31, 2022 •

edited

Loading

psytrx commented Sep 7, 2022 •

edited

Loading

feynmanliang commented Dec 19, 2022 •

edited

Loading