- Sponsor
-
Notifications
You must be signed in to change notification settings - Fork 463
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
FormHelper transform not working #1131
Comments
i got same problem |
I tested again with react 18 instead of react 17, but the problem still remains |
for now i use alternatif way,
|
Not sure if this is the same issue, but I'm having similar problems with a Rails backend. I've found that if my server responds with anything other than a success, the transform method doesn't run. This makes debugging incredibly difficult and confusing. I was hoping to be able to throw some values at my server and see what shape they arrived, then make it look the way Rails wants it to look. Instead it seems I have to build my transforms in another method and then move it over to the transform block once it's ready? To make it even more confusing, It would really be great to have access to the shape of the transformed data client side before it gets sent off to the server, and even greater if the transform was applied to the request regardless of server response. |
I just stumbled across the same issue. Is there any update on when this would be fixed? |
Why is the issue not being resolved? It's been eight months! You have a PR #1171. Why is not merged? |
I am facin the same issue with vue3 |
so am i |
Is there no fix for this issue still? |
Still not fixed? |
I'm currently facing this issue too |
Issue is still present in v1.0. |
@RSDrsd That works really well thanks, I was getting the validation errors not coming back before but with your workaround the error messages now work! |
Any update? |
Hope this will be fixed, there's a pr for this |
I thought I might offer a solution for those searching for something quick. I built my form solution to be reusable, and published it to npm to make things easier for me. It includes a re-work of Please feel free to use it, copy it, steal it, improve it, etc. |
@aviemet Really neat!! Just looked at the repo and it looks really nice. Will try to use it in another project! |
Hey! Thanks so much for your interest in Inertia.js and for sharing this issue/suggestion. In an attempt to get on top of the issues and pull requests on this project I am going through all the older issues and PRs and closing them, as there's a decent chance that they have since been resolved or are simply not relevant any longer. My hope is that with a "clean slate" me and the other project maintainers will be able to better keep on top of issues and PRs moving forward. Of course there's a chance that this issue is still relevant, and if that's the case feel free to simply submit a new issue. The only thing I ask is that you please include a super minimal reproduction of the issue as a Git repo. This makes it much easier for us to reproduce things on our end and ultimately fix it. Really not trying to be dismissive here, I just need to find a way to get this project back into a state that I am able to maintain it. Hope that makes sense! ❤️ |
Any update i m stuck on this issue |
I had the same problem, so, I just change my focus, I tried But din't work, so, how can I do the same using inertia? Using router.visit, so router have shortcut, then I changed post from useForm to
|
Due to the way the bug is introduced, there unfortunately isn't any way to circumvent it and still have the benefits of the I created a package which fixes this issue and also adds support for nested form data. If you want to use the nested data solution, or don't mind the slightly larger import size, that could be useful for you. Another person left a comment that they created a new npm package from a fork of Inertia where the only change is properly memoizing the transform method (which fixes the bug). |
Given the current implementation of Here's a workaround for the OP: const { data, setData, transform, post } = useForm({
status: "default",
foo: "bar",
});
// Store the current "status" in a ref
const statusRef = useRef("default");
// Place the transform call in the function body
transform((data) => ({ ...data, status: statusRef.current }));
function handleDraft(event) {
event.preventDefault();
statusRef.current = "draft";
post("/test");
}
function handleSave(event) {
event.preventDefault();
statusRef.current = "open";
post("/test");
} |
This is the workaround I have come up with for a slightly different use case. I have articles which may be in draft state - they can always be saved (with the draft state left unchanged) But I also want buttons to publish or unpublish which should change the draft status and then save I originally thought I could use transform for this but realised it doesn't work that way. Instead I added a flag to the "data" object to indicate the status has saved - now I set this flag and change the draft status. When the component re-renders the flag is detected (set back to false) and the save is triggered - now with the updated "data" object. I haven't used this in production yet - it works in testing and I'd be interested in whether people thing this is a good approach. // change draft state and trigger a save
const publish = () => {
setData({ ...data, changedPublishedState: true, "draft": false });
}
const unpublish = () => {
setData({ ...data, changedPublishedState: true, "draft": true });
}
// save without changing state
const submit = (e) => {
e.preventDefault();
save();
}
const save = () => {
post(route("article.update", { site: site.id, article: article.id }),
{
preserveScroll: false,
preserveState: (page) => Object.keys(page.props.errors).length,
onSuccess: () => {
setTab("edit");
}
});
};
// triggered after a re-render when data.draft status has been changed
if (data.changedPublishedState) {
setData("changedPublishedState", false);
save();
} |
This is still not resolved. I am using a Laravel Vue setup and no matter what I've tried, form.transform is never triggered when calling regular or arrow functions. Like others have mentioned, you can't log inside of the callback function to see if it is ever entered. Would be nice for this to be addressed. |
Versions:
@inertiajs/inertia
version: 0.11.0@inertiajs/inertia-react
version: 0.8.0Describe the problem:
The
transform
function of the form helper does not work.Steps to reproduce:
In both cases (
handleSave
orhandleDraft
called) the result from the laravel controller is:The text was updated successfully, but these errors were encountered: