How to handle 405 errors with useDebounceFetcher

[zwhitchcox]

When you navigate away from a page, and a debounced action is still submitting, it will be submitted to the page you just navigated to.

In my code:

	useEffect(() => {
		if (userNote == null || userNote === data.note) return
		reviewFetcher.submit(
			{ notes: userNote },
			{
				method: 'post',
				debounceTimeout: 500,
			},
		)
	}, [userNote, call.reviews, user.id, reviewFetcher])

if someone navigates away from the page before the 500 ms have elapsed and the action has been submitted, it will submit to the new page.

I have circumvented this problem by adding the pathname as the action:

	const { pathname } = useLocation()
...
		reviewFetcher.submit(
			{ notes: userNote },
			{
				method: 'post',
				debounceTimeout: 500,
				action: pathname,
			},

However, this is not ideal, as it requires me to remember to add the pathname to every debounced fetcher.

I was wondering if anyone had a solution to this, or maybe the pathname should be saved in a closure when the submit method is called.

I can open an issue for this if that would be useful.

[sergiodxa]

I think adding the path yourself is not an issue but it would be idea to don't need it. @jacobparis what do you think? I think the hook could call useLocation to know the current pathname and automatically add it if a custom one is not provided.

[jacobparis]

Ah this is interesting

I don't think useLocation() is the whole solution here because a form on a layout has a chance of being either to the URL or to ?index

I wonder if there's a way we can pluck the pathname off the initial event and re-use that when it fires