Inertia Form: Merge two objects of URL parameters?

I'm trying to use Inertia <Form> to pass some parameters to a URL request, along some other ones that are stored as variables in React.

For that I'm trying to use object merging like:

<Form
method='GET'
action='/calls'
transform={data => ({...queryParams, ...data})}
>

But that flops because, for some reason, the form's URL parameters always get overwritten by whatever other parameters I have stored in queryParams.

Another problem would be that all the Parameters gets put into the URL, even if they are empty.

Is there an elegant solution? Is my approach beneficial at all?

Max100

2 months ago

Level 6

I don't use React, so I'm not sure about your situation. However, I pass parameters in the Route() method, using named routes. I also use inertia's useForm().

So my call might look something like:

my_form.put( route( 'calls.edit', { 'param1': value1, 'param2': value2 } ) );

Inertia's useForm() is pretty helpful and route() makes the code cleaner. I don't use the method or action attributes in forms anymore. For more info, see the 'Form Helper' section in the docs:

Inertia Forms - Form Helper

Note the Inertia route() is slightly different than the Laravel version, because it passes the params as an object rather than an array.

Also, fwiw, I only use post, put or delete on forms.

Inertia's useForm() makes form handling fairly straightforward for most situations, and you can fall back to axios (included), if it's needed.

HTH,

1 like

andrews-quest

2 months ago

Level 1

Thank you for your answer! Do you have an advice on what's the best practice to develop a search on the site? Would you rather do it with forms or otherwise?

Please or to participate in this conversation.