Action "..." not found at Module.namedAction

[rodolphoasb]

I'm building a workflow builder that has an autosave feature, this is the way that I've implemented it (I'm using namedAction and useDebounceFetcher from remix-utils):

useDeepCompareEffect(() => {
    // Check if the route is different from the current route
    if (navigation.state === "loading") {
      return;
    }

    debounceFetcher.submit(
      {
        content: JSON.stringify(reactFlowInstance.toObject()),
      },
      {
        action: "?/saveFlowContent",

        method: "post",
        debounceTimeout: 2500,
      }
    );
  }, [nodes, edges]);

The problem is that:

Let's say that I move one node around (this triggers the debounceFetcher submit) and immediately try to navigate to another route - clicking on a sidebar link for example. When I get to that route there isn't a named Action with that name, so I get the error:

ReferenceError: Action "saveFlowContent" not found at Module.namedAction

So basically, I'd need a way to "cancel" this fetcher that was sent.

I tried to used a default inside the namedAction in the other route, but that doesn't seem to be working. And also, I'm not sure if it's the best solution, since there's a lot of different routes the user can navigate to and I'd need to add a default to every one of them.

How would you handle this problem?