Update to optiona API

Author: brophdawg11

packages/react-router/__tests__/router/fetchers-test.ts

@@ -3653,5 +3653,18 @@ describe("fetchers", () => {
       });
       expect(B.loaders.fetch.signal.aborted).toBe(true);
     });
+
+    it("passes along the `reason` to the abort controller", async () => {
+      let t = setup({
+        routes: [
+          { id: "root", path: "/" },
+          { id: "fetch", path: "/fetch", loader: true },
+        ],
+      });
+
+      let A = await t.fetch("/fetch", "a", "root");
+      t.router.resetFetcher("a", { reason: "BECAUSE I SAID SO" });
+      expect(A.loaders.fetch.signal.reason).toBe("BECAUSE I SAID SO");
+    });
   });
 });

packages/react-router/lib/dom/lib.tsx

@@ -2668,7 +2668,7 @@ export type FetcherWithComponents<TData> = Fetcher<TData> & {
    * @param reason Optional `reason` to provide to [`AbortController.abort()`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort)
    * @returns void
    */
-  unstable_reset: (reason?: unknown) => void;
+  unstable_reset: (opts?: { reason?: unknown }) => void;
 
   /**
    *  Submits form data to a route. While multiple nested routes can match a URL, only the leaf route will be called.
@@ -2843,7 +2843,7 @@ export function useFetcher<T = any>({
 
   let unstable_reset = React.useCallback<
     FetcherWithComponents<T>["unstable_reset"]
-  >((reason) => router.resetFetcher(fetcherKey, reason), [router, fetcherKey]);
+  >((opts) => router.resetFetcher(fetcherKey, opts), [router, fetcherKey]);
 
   let FetcherForm = React.useMemo(() => {
     let FetcherForm = React.forwardRef<HTMLFormElement, FetcherFormProps>(

packages/react-router/lib/router/router.ts

@@ -222,7 +222,7 @@ export interface Router {
    * Reset the fetcher for a given key
    * @param key
    */
-  resetFetcher(key: string, reason?: unknown): void;
+  resetFetcher(key: string, opts?: { reason?: unknown }): void;
 
   /**
    * @private
@@ -3068,8 +3068,8 @@ export function createRouter(init: RouterInit): Router {
     return state.fetchers.get(key) || IDLE_FETCHER;
   }
 
-  function resetFetcher(key: string, reason?: unknown) {
-    abortFetcher(key, reason);
+  function resetFetcher(key: string, opts?: { reason?: unknown }) {
+    abortFetcher(key, opts?.reason);
     updateFetcherState(key, getDoneFetcher(null));
   }