Add Data Mutation Guide #994
Conversation
|
|
✅ Deploy Preview for solid-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for solid-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
amirhhashemi
force-pushed
the
add-data-mutation-guide
branch
from
ad657f8 to
6bb8293
Compare
amirhhashemi
force-pushed
the
add-data-mutation-guide
branch
from
e51f764 to
9ad48e6
Compare
| const addPost = action(async (title: string) => { | ||
| await fetch("https://my-api.com/posts", { | ||
| method: "POST", | ||
| body: JSON.stringify({ title }), | ||
| }); | ||
| }, "addPost"); | ||
|
|
||
| export default function Page() { | ||
| const [title, setTitle] = createSignal(""); | ||
| return ( | ||
| <form action={addPost.with(title())} method="post"> | ||
| <input value={title()} onChange={(e) => setTitle(e.target.value)} /> | ||
| <button>Add Post</button> | ||
| </form> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| Note that the action takes a `string` as its parameter rather than a `FormData`. |
There was a problem hiding this comment.
| const addPost = action(async (title: string) => { | |
| await fetch("https://my-api.com/posts", { | |
| method: "POST", | |
| body: JSON.stringify({ title }), | |
| }); | |
| }, "addPost"); | |
| export default function Page() { | |
| const [title, setTitle] = createSignal(""); | |
| return ( | |
| <form action={addPost.with(title())} method="post"> | |
| <input value={title()} onChange={(e) => setTitle(e.target.value)} /> | |
| <button>Add Post</button> | |
| </form> | |
| ); | |
| } | |
| ``` | |
| Note that the action takes a `string` as its parameter rather than a `FormData`. | |
| const addPost = action(async (title: string, formData: FormData) => { | |
| await fetch("https://my-api.com/posts", { | |
| method: "POST", | |
| body: JSON.stringify({ title }), | |
| }); | |
| }, "addPost"); | |
| export default function Page() { | |
| const [title, setTitle] = createSignal(""); | |
| return ( | |
| <form action={addPost.with(title())} method="post"> | |
| <input value={title()} onChange={(e) => setTitle(e.target.value)} /> | |
| <button>Add Post</button> | |
| </form> | |
| ); | |
| } |
Note that the action now takes a string as its first parameter and the FormData as its second.
There was a problem hiding this comment.
I tried not to go into details of APIs in this guide. I believe that this content is better suited for the API Reference.
There was a problem hiding this comment.
I understand, but saying
the action takes a
stringas its parameter rather than aFormData
just felt a little misleading, it gives off the impression that the formdata cannot be used anymore if you switch to the .with form.
There was a problem hiding this comment.
How about this:
Note that the action takes a
stringas its first parameter rather than aFormData.
This doesn't imply that FormData is not accessible inside the action, and doesn't go too much API details.
I don't want to mention the FormData is passed as the second argument because it's not related to the example.
There was a problem hiding this comment.
Do you have a practical example of using FormData inside an action when using with()? If there is a common pattern that I'm not aware of, I'm open to update this particular example.
There was a problem hiding this comment.
I think this wording makes more sense to me now, I'm good with it.
Also here's an example that shows one use case with Remix where we would need both arguments
Instead of the hidden input like in this example, we would pass the tweet id using .with, and use the formdata to determine which action was taken.
| return ( | ||
| <div> | ||
| <input value={title()} onInput={(e) => setTitle(e.target.value)} /> | ||
| <button onClick={() => addPostAction(title())}>Add Post</button> |
There was a problem hiding this comment.
I would recommend adding a callout at the bottom of this section that explains why form actions are preferred over useAction in terms of accessibility and progressive enhancement.
There was a problem hiding this comment.
This is better suited for a tutorial.
Like the Data Fetching guide, this guide is geared toward people who want to know how to do things, and not why and when.
Co-authored-by: Dev Agrawal <[email protected]>
Co-authored-by: Dev Agrawal <[email protected]>
Description(required)
This is a follow up to #991.
This PR adds a data mutation guide
Related issues & labels