typescript FormDataConvertible is not well typed

[MellianStudios]

Versions:

• @inertiajs/inertia version: 0.11.0
• @inertiajs/inertia-vue3 version: 0.6.0

Describe the problem:

while using typesript if I use

Inertia.[method]();

there is error thrown

TS2345: Argument of type '{ images: { front: string; back: string; rear: string; }; }' is not assignable to parameter of type 'RequestPayload | undefined'.
  Type '{ images: { front: string; back: string; rear: string; }; }' is not assignable to type 'Record<string, FormDataConvertible>'.
    Property 'images' is incompatible with index signature.
      Type '{ front: string; back: string; rear: string; }' is not assignable to type 'FormDataConvertible'.

as long as structure of data is simple 1 layer like this

{image: ''}

it works however it doesn't allow having object as value of property

there is no practical reason why it should be like that it is just because FormDataConvertible doesn't allow it

Steps to reproduce:

use typescript and copy this code

import {reactive} from 'vue';
import {Inertia} from '@inertiajs/inertia';

const form = reactive({
    images: {
        front: '',
        back: '',
        rear: '',
    },
});

Inertia.put('', form);

[aviemet]

It looks like we may have had similar issues at the same time. I came here today to create an issue about typescript errors when sending nested data using Inertia manual visits.

Inertia.patch('/users/1', {
  user: {
    first_name: 'Alan'
  }
})

/*
Type '{ first_name: string; }' is not assignable to type 'FormDataConvertible'.
  Object literal may only specify known properties, and 'first_name' does not exist in type 'FormDataConvertible[] | Blob | File | Date'.
*/

With Rails strong parameters, it's basically a requirement to send nested form data, so that really does need to be an option. What I find interesting is that if I tell my editor to ignore the typescript error, nested data is sent to the backend correctly. So that means the method works as expected, it's just the types which are incorrect.

[MellianStudios]

yes this is typescript specific issue if you ignore it or don't use typescript at all everything just works

this just needs correction in its typing

[JannieT]

My workaround to appease the compiler for now:

const payload = {
  user: {
    first_name: 'Alan'
  }
} as unknown;

Inertia.post(endpoint, payload as RequestPayload);

[b9sk]

The type error issue still persists in "@inertiajs/react": "^1.0.0", but it can be resolved by using a spread operator:

router.post(
    '/endpoint',
    {
        ...formData,
    },        
);