feat(remix-react)!: remove fetcher.type/fetcher.submission (#5716)

remix-run · Jul 9, 2023 · 561bc4f · 561bc4f
1 parent 802a72b
commit 561bc4f
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 393 deletions.
diff --git a/.changeset/remove-fetcher-back-compat.md b/.changeset/remove-fetcher-back-compat.md
@@ -0,0 +1,8 @@
+---
+"@remix-run/react": major
+---
+
+Remove back-compat layer for `useFetcher`/`useFetchers`.  This includes a few small breaking changes:
+* `fetcher.type` has been removed since it can be derived from other available information
+* "Submission" fields have been flattened from `fetcher.submission` down onto the root `fetcher` object, and prefixed with `form` in some cases (`fetcher.submission.action` => `fetcher.formAction`)
+* `<fetcher.Form method="get">` is now more accurately categorized as `state:"loading"` instead of `state:"submitting"` to better align with the underlying GET request
diff --git a/integration/fetcher-state-test.ts b/integration/fetcher-state-test.ts
@@ -47,16 +47,10 @@ test.describe("fetcher states", () => {
               if (savedStates[savedStates.length - 1]?.state !== fetcher.state) {
                 savedStates.push({
                   state: fetcher.state,
-                  type: fetcher.type,
                   formMethod: fetcher.formMethod,
                   formAction: fetcher.formAction,
                   formData:fetcher.formData ? Object.fromEntries(fetcher.formData.entries()) : undefined,
                   formEncType: fetcher.formEncType,
-                  submission: fetcher.submission ? {
-                    ...fetcher.submission,
-                    formData: Object.fromEntries(fetcher.submission.formData.entries()),
-                    key: undefined
-                  }: undefined,
                   data: fetcher.data,
                 });
               }
@@ -100,12 +94,11 @@ test.describe("fetcher states", () => {
             const fetcher = useFetcher();
             return (
               <>
-                {fetcher.type === 'init' ?
+                {fetcher.state === 'idle' && fetcher.data == null ?
                   <pre id="initial-state">
                     {
                       JSON.stringify({
                         state: fetcher.state,
-                        type: fetcher.type,
                         formMethod: fetcher.formMethod,
                         formAction: fetcher.formAction,
                         formData: fetcher.formData,
@@ -163,7 +156,11 @@ test.describe("fetcher states", () => {
     let text = (await app.getElement("#initial-state")).text();
     expect(JSON.parse(text)).toEqual({
       state: "idle",
-      type: "init",
+      data: undefined,
+      formData: undefined,
+      formAction: undefined,
+      formMethod: undefined,
+      formEncType: undefined,
     });
   });
 
@@ -176,38 +173,23 @@ test.describe("fetcher states", () => {
     expect(JSON.parse(text)).toEqual([
       {
         state: "submitting",
-        type: "actionSubmission",
         formData: { key: "value" },
         formAction: "/page",
         formMethod: "POST",
         formEncType: "application/x-www-form-urlencoded",
-        submission: {
-          formData: { key: "value" },
-          action: "/page",
-          method: "POST",
-          encType: "application/x-www-form-urlencoded",
-        },
       },
       {
         state: "loading",
-        type: "actionReload",
         formData: { key: "value" },
         formAction: "/page",
         formMethod: "POST",
         formEncType: "application/x-www-form-urlencoded",
-        submission: {
-          formData: { key: "value" },
-          action: "/page",
-          method: "POST",
-          encType: "application/x-www-form-urlencoded",
-        },
         data: {
           from: "action",
         },
       },
       {
         state: "idle",
-        type: "done",
         data: {
           from: "action",
         },
@@ -223,25 +205,14 @@ test.describe("fetcher states", () => {
     let text = (await app.getElement("#states")).text();
     expect(JSON.parse(text)).toEqual([
       {
-        state: "submitting",
-        type: "loaderSubmission",
+        state: "loading",
         formData: { key: "value" },
         formAction: "/page",
         formMethod: "GET",
         formEncType: "application/x-www-form-urlencoded",
-        submission: {
-          formData: { key: "value" },
-          // Note: This is a bug in Remix but we're going to keep it that way
-          // in useTransition (including the back-compat version) and it'll be
-          // fixed with useNavigation
-          action: "/page?key=value",
-          method: "GET",
-          encType: "application/x-www-form-urlencoded",
-        },
       },
       {
         state: "idle",
-        type: "done",
         data: {
           from: "loader",
         },
@@ -258,35 +229,20 @@ test.describe("fetcher states", () => {
     expect(JSON.parse(text)).toEqual([
       {
         state: "submitting",
-        type: "actionSubmission",
         formData: { redirect: "yes" },
         formAction: "/page",
         formMethod: "POST",
         formEncType: "application/x-www-form-urlencoded",
-        submission: {
-          formData: { redirect: "yes" },
-          action: "/page",
-          method: "POST",
-          encType: "application/x-www-form-urlencoded",
-        },
       },
       {
         state: "loading",
-        type: "actionRedirect",
         formData: { redirect: "yes" },
         formAction: "/page",
         formMethod: "POST",
         formEncType: "application/x-www-form-urlencoded",
-        submission: {
-          formData: { redirect: "yes" },
-          action: "/page",
-          method: "POST",
-          encType: "application/x-www-form-urlencoded",
-        },
       },
       {
         state: "idle",
-        type: "done",
       },
     ]);
   });
@@ -300,12 +256,10 @@ test.describe("fetcher states", () => {
     expect(JSON.parse(text)).toEqual([
       {
         state: "loading",
-        type: "normalLoad",
       },
       {
         data: { from: "loader" },
         state: "idle",
-        type: "done",
       },
     ]);
   });