feat(remix-react): add reset function to fetchers

contributors.yml

@@ -363,6 +363,7 @@
 - vimutti77
 - visormatt
 - vkrol
+- Vlemert
 - vlindhol
 - weavdale
 - wKovacs64

integration/fetcher-test.ts

@@ -10,6 +10,7 @@ test.describe("useFetcher", () => {
 
   let CHEESESTEAK = "CHEESESTEAK";
   let LUNCH = "LUNCH";
+  let EMPTY_PLATE = "EMPTY_PLATE";
 
   test.beforeAll(async () => {
     fixture = await createFixture({
@@ -75,7 +76,12 @@ test.describe("useFetcher", () => {
                 }}>
                   submit
                 </button>
-                <pre>{fetcher.data}</pre>
+                <button id="fetcher-reset" type="button" onClick={() => {
+                  fetcher.reset();
+                }}>
+                  reset
+                </button>
+                <pre>{fetcher.data != null ? fetcher.data : "${EMPTY_PLATE}"}</pre>
               </>
             );
           }
@@ -123,10 +129,20 @@ test.describe("useFetcher", () => {
   });
 
   test("load can hit a loader", async ({ page }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/");
+    expect(await app.getHtml("pre")).toMatch(EMPTY_PLATE);
+    await app.clickElement("#fetcher-load");
+    expect(await app.getHtml("pre")).toMatch(LUNCH);
+  });
+
+  test("fetcher can be reset", async ({ page }) => {
     let app = new PlaywrightFixture(appFixture, page);
     await app.goto("/");
     await app.clickElement("#fetcher-load");
     expect(await app.getHtml("pre")).toMatch(LUNCH);
+    await app.clickElement("#fetcher-reset");
+    expect(await app.getHtml("pre")).toMatch(EMPTY_PLATE);
   });
 
   test("submit can hit an action", async ({ page }) => {

packages/remix-react/__tests__/transition-test.tsx

@@ -1260,6 +1260,45 @@ describe("fetcher states", () => {
     expect(fetcher.data).toBe("B DATA");
   });
 
+  test("loader reset while loading", async () => {
+    let t = setup({ url: "/foo" });
+
+    let A = t.fetch.get("/foo");
+    let fetcher = t.getFetcher(A.key);
+    expect(fetcher.state).toBe("loading");
+    expect(fetcher.type).toBe("normalLoad");
+
+    t.resetFetcher(A.key);
+    await A.loader.resolve("A DATA");
+
+    fetcher = t.getFetcher(A.key);
+    expect(fetcher.state).toBe("idle");
+    expect(fetcher.type).toBe("init");
+    expect(fetcher.data).toBe(undefined);
+  });
+
+  test("loader reset after load", async () => {
+    let t = setup({ url: "/foo" });
+
+    let A = t.fetch.get("/foo");
+    let fetcher = t.getFetcher(A.key);
+    expect(fetcher.state).toBe("loading");
+    expect(fetcher.type).toBe("normalLoad");
+
+    await A.loader.resolve("A DATA");
+    fetcher = t.getFetcher(A.key);
+    expect(fetcher.state).toBe("idle");
+    expect(fetcher.type).toBe("done");
+    expect(fetcher.data).toBe("A DATA");
+
+    t.resetFetcher(A.key);
+
+    fetcher = t.getFetcher(A.key);
+    expect(fetcher.state).toBe("idle");
+    expect(fetcher.type).toBe("init");
+    expect(fetcher.data).toBe(undefined);
+  });
+
   test("loader submission fetch", async () => {
     let t = setup({ url: "/foo" });
 
@@ -1507,6 +1546,14 @@ describe("fetcher resubmissions/re-gets", () => {
     expect(B.loader.abortMock.calls.length).toBe(1);
   });
 
+  it("aborts on reset", async () => {
+    let t = setup();
+    let key = "KEY";
+    let A = t.fetch.submitGet("/foo", key);
+    t.tm.resetFetcher(key);
+    expect(A.loader.abortMock.calls.length).toBe(1);
+  });
+
   it("aborts resubmissions action call", async () => {
     let t = setup();
     let key = "KEY";
@@ -2276,6 +2323,7 @@ let setup = ({ url } = { url: "/" }) => {
     fetch,
     getState: tm.getState,
     getFetcher: tm.getFetcher,
+    resetFetcher: tm.resetFetcher,
     handleChange,
     handleRedirect,
     rootLoaderMock: rootLoader.mock,

packages/remix-react/components.tsx

@@ -1382,6 +1382,9 @@ export function useFetcher<TData = any>(): FetcherWithComponents<TData> {
   let [load] = React.useState(() => (href: string) => {
     transitionManager.send({ type: "fetcher", href, key });
   });
+  let [reset] = React.useState(() => () => {
+    transitionManager.resetFetcher(key);
+  });
   let submit = useSubmitImpl(key);
 
   let fetcher = transitionManager.getFetcher<TData>(key);
@@ -1391,6 +1394,7 @@ export function useFetcher<TData = any>(): FetcherWithComponents<TData> {
       Form,
       submit,
       load,
+      reset,
       ...fetcher,
     }),
     [fetcher, Form, submit, load]

packages/remix-react/transition.ts

@@ -1369,6 +1369,15 @@ export function createTransitionManager(init: TransitionManagerInit) {
     fetchControllers.delete(key);
   }
 
+  function resetFetcher(key: string) {
+    console.debug(`[transition] resetting fetcher (key: ${key})`);
+    let fetcher = getFetcher(key);
+    invariant(fetcher, `Expected fetcher: ${key}`);
+    if (fetchControllers.has(key)) abortFetcher(key);
+    setFetcher(key, IDLE_FETCHER);
+    update({ fetchers: new Map(state.fetchers) });
+  }
+
   function markFetchRedirectsDone(): void {
     let doneKeys = [];
     for (let key of fetchRedirectIds) {
@@ -1387,6 +1396,7 @@ export function createTransitionManager(init: TransitionManagerInit) {
     getState,
     getFetcher,
     deleteFetcher,
+    resetFetcher,
     dispose,
     get _internalFetchControllers() {
       return fetchControllers;