0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-06 22:10:10 -05:00
astro/.changeset/silly-bulldogs-sparkle.md
Ben Holmes 84189b6511
Actions: New fallback behavior with action={actions.name} (#11570)
* feat: support _astroAction query param

* feat(test): _astroAction query param

* fix: handle _actions requests from legacy fallback

* feat(e2e): new actions pattern on blog test

* feat: update React 19 adapter to use query params

* fix: remove legacy getApiContext()

* feat: ActionQueryStringInvalidError

* fix: update error description

* feat: ActionQueryStringInvalidError

* chore: comment on _actions skip

* feat: .queryString property

* chore: comment on throw new Error

* chore: better guess for "why" on query string

* chore: remove console log

* chore: changeset

* chore: changeset
2024-07-30 11:04:10 -04:00

1.4 KiB

@astrojs/react astro
patch patch

BREAKING CHANGE to the experimental Actions API only. Install the latest @astrojs/react integration as well if you're using React 19 features.

Updates the Astro Actions fallback to support action={actions.name} instead of using getActionProps(). This will submit a form to the server in zero-JS scenarios using a search parameter:

---
import { actions } from 'astro:actions';
---

<form action={actions.logOut}>
<!--output: action="?_astroAction=logOut"-->
  <button>Log Out</button>
</form>

You may also construct form action URLs using string concatenation, or by using the URL() constructor, with the an action's .queryString property:

---
import { actions } from 'astro:actions';

const confirmationUrl = new URL('/confirmation', Astro.url);
confirmationUrl.search = actions.queryString;
---

<form method="POST" action={confirmationUrl.pathname}>
  <button>Submit</button>
</form>

Migration

getActionProps() is now deprecated. To use the new fallback pattern, remove the getActionProps() input from your form and pass your action function to the form action attribute:

---
import {
  actions,
- getActionProps,  
} from 'astro:actions';
---

+ <form method="POST" action={actions.logOut}>
- <form method="POST">
- <input {...getActionProps(actions.logOut)} />
  <button>Log Out</button>
</form>