using useSWRMutation and optimisticData in a form to send a POST

[marco-digennaro]

Hello,
i'm just trying out the version 2.0.0 and tried to using useSWRMutation and optimisticData in a form to send a POST and update my data remotely.

this is extracted from my code:

  const { handleSubmit, control } = useForm<FormData>({ mode: "onChange" });
  const { trigger, data, isMutating } = useSWRMutation(`${baseUrl}radios`, sendRequest);`  
  const onSubmit: SubmitHandler<FormData> = async formData => {
    console.log(formData);
    try {
      await trigger(formData, {
        optimisticData: current => ({ ...current, formData }),
        rollbackOnError: true,
        populateCache: true,
        revalidate: false,
      });

    } catch (e) {
      console.log(e);
    }
  };
  
  return(
    <form  onSubmit={handleSubmit(onSubmit)}>
....
         <button className={buttonClass} type="submit" disabled={isMutating}>
            {isMutating ? "Sending" : " Submit"}
          </button>
     </form>
)

I get optimisticData red underlined on my IDE with the following problem:

(property) optimisticData?: Response | ((currentData?: Response | undefined) => Response) | undefined
Type '(current: Response | undefined) => { formData: FormData; headers?: Headers | undefined; ok?: boolean | undefined; redirected?: boolean | undefined; ... 10 more ...; text?: (() => Promise<...>) | undefined; }' is not assignable to type 'Response | ((currentData?: Response | undefined) => Response) | undefined'.
  Type '(current: Response | undefined) => { formData: FormData; headers?: Headers | undefined; ok?: boolean | undefined; redirected?: boolean | undefined; ... 10 more ...; text?: (() => Promise<...>) | undefined; }' is not assignable to type '(currentData?: Response | undefined) => Response'.
    Call signature return types '{ formData: FormData; headers?: Headers | undefined; ok?: boolean | undefined; redirected?: boolean | undefined; status?: number | undefined; statusText?: string | undefined; ... 8 more ...; text?: (() => Promise<...>) | undefined; }' and 'Response' are incompatible.
      The types of 'headers' are incompatible between these types.
        Type 'Headers | undefined' is not assignable to type 'Headers'.
          Type 'undefined' is not assignable to type 'Headers'.ts(2322)

I don't understand where's the type error and. how i can solve it.

thank you in advance for your help