[Bug]: fetcher.submit ignores fetcherKey option

[jhartling]

What version of React Router are you using?

6.23.1

Steps to Reproduce

Use fetcher.submit() with the fetcherKey option specified:

fetcher.submit(data, { action: "/my-route", fetcherKey: 'this-is-ignored' });

Expected Behavior

The fetcher is submitted using the supplied fetcherKey in fetcher.submit().

Actual Behavior

The fetcherKey supplied in fetcher.submit() is ignored. You can see here it's always overwritten:
https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/index.tsx#L1709

[brophdawg11]

fetcherKey is only used with Form/useNavigate - we had a TS bug that it was shown as an option in fetcher.submit that was fixed in #11631 and will be available in the next release.

Fetcher keys are specified at the hook call site via useFetcher({ key })

[jhartling]

@brophdawg11 Thanks for the reply!

The Remix docs misled me a bit, they say:

fetcher.submit is a wrapper around a useSubmit call for the fetcher instance, so it also accepts the same options as useSubmit.

My use case is making a reusable fetcher where the key is composed of a value passed to a callback:

export const useMyItemAction = () => {
  const fetcher = useFetcher();
  return useCallback(
    (item: MyItem) => {
      fetcher.submit(JSON.stringify(item), {
        action: '/my/action',
        encType: 'application/json',
        fetcherKey: `${FetcherTypes.MY_ACTION}:${item.id}`,
        method: 'POST',
      });
    },
    [fetcher],
  );
};

I've switched to using useSubmit directly, which better suits my use case anyways.