Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/docs/en/reference/cli-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ Generates TypeScript types for all Astro modules. This sets up a [`src/env.d.ts`
- The `astro:content` module for the [Content Collections API](/en/guides/content-collections/).
- The `astro:db` module for [Astro DB](/en/guides/astro-db/).
- The `astro:env` module for [experimental Astro Env](/en/reference/configuration-reference/#experimentalenv).
- The `astro:actions` module for [experimental Astro Actions](/en/reference/configuration-reference/#experimentalactions)
- The `astro:actions` module for [Astro Actions](/en/guides/actions/)

## `astro add`

Expand Down
100 changes: 0 additions & 100 deletions src/content/docs/en/reference/configuration-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1285,106 +1285,6 @@ This option will be enabled by default in Astro 5.0.
}
```

### experimental.actions

<p>

**Type:** `boolean`<br />
**Default:** `false`<br />
<Since v="4.8.0" />
</p>

Actions help you write type-safe backend functions you can call from anywhere. Enable server rendering [using the `output` property](/en/basics/rendering-modes/#on-demand-rendered) and add the `actions` flag to the `experimental` object:

```js
{
output: 'hybrid', // or 'server'
experimental: {
actions: true,
},
}
```

Declare all your actions in `src/actions/index.ts`. This file is the global actions handler.

Define an action using the `defineAction()` utility from the `astro:actions` module. An action accepts the `handler` property to define your server-side request handler. If your action accepts arguments, apply the `input` property to validate parameters with Zod.

This example defines two actions: `like` and `comment`. The `like` action accepts a JSON object with a `postId` string, while the `comment` action accepts [FormData](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) with `postId`, `author`, and `body` strings. Each `handler` updates your database and return a type-safe response.

```ts
// src/actions/index.ts
import { defineAction, z } from "astro:actions";

export const server = {
like: defineAction({
input: z.object({ postId: z.string() }),
handler: async ({ postId }) => {
// update likes in db

return likes;
},
}),
comment: defineAction({
accept: 'form',
input: z.object({
postId: z.string(),
author: z.string(),
body: z.string(),
}),
handler: async ({ postId }) => {
// insert comments in db

return comment;
},
}),
};
```

Then, call an action from your client components using the `actions` object from `astro:actions`. You can pass a type-safe object when using JSON, or a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) object when using `accept: 'form'` in your action definition.

This example calls the `like` and `comment` actions from a React component:

```tsx "actions"
// src/components/blog.tsx
import { actions } from "astro:actions";
import { useState } from "react";

export function Like({ postId }: { postId: string }) {
const [likes, setLikes] = useState(0);
return (
<button
onClick={async () => {
const newLikes = await actions.like({ postId });
setLikes(newLikes);
}}
>
{likes} likes
</button>
);
}

export function Comment({ postId }: { postId: string }) {
return (
<form
onSubmit={async (e) => {
e.preventDefault();
const formData = new FormData(e.target as HTMLFormElement);
const result = await actions.blog.comment(formData);
// handle result
}}
>
<input type="hidden" name="postId" value={postId} />
<label htmlFor="author">Author</label>
<input id="author" type="text" name="author" />
<textarea rows={10} name="body"></textarea>
<button type="submit">Post</button>
</form>
);
}
```

For a complete overview, and to give feedback on this experimental API, see the [Actions RFC](https://github.com/withastro/roadmap/blob/actions/proposals/0046-actions.md).

### experimental.contentCollectionCache

<p>
Expand Down