Skip to content

Commit f92aa2e

Browse files
committed
Revert "Add better control over submission serialization (#10342)"
This reverts commit 9d81bf6.
1 parent 4bb7e48 commit f92aa2e

File tree

14 files changed

+140
-1115
lines changed

14 files changed

+140
-1115
lines changed

.changeset/raw-payload-submission-router.md

Lines changed: 0 additions & 20 deletions
This file was deleted.

.changeset/raw-payload-submission.md

Lines changed: 0 additions & 105 deletions
This file was deleted.

docs/hooks/use-fetcher.md

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ function SomeComponent() {
3838
// build your UI with these properties
3939
fetcher.state;
4040
fetcher.formData;
41-
fetcher.payload;
4241
fetcher.formMethod;
4342
fetcher.formAction;
4443
fetcher.data;
@@ -133,8 +132,6 @@ export function useIdleLogout() {
133132
}
134133
```
135134

136-
`fetcher.submit` is a wrapper around a [`useSubmit`][use-submit] call for the fetcher instance, so it also accepts the same options as `useSubmit`.
137-
138135
If you want to submit to an index route, use the [`?index` param][indexsearchparam].
139136

140137
If you find yourself calling this function inside of click handlers, you can probably simplify your code by using `<fetcher.Form>` instead.
@@ -203,8 +200,6 @@ function TaskCheckbox({ task }) {
203200
}
204201
```
205202

206-
If you opt-out of serialization using `encType: null`, then `fetcher.formData` will be `undefined` and your data will be exposed on `fetcher.payload`.
207-
208203
## `fetcher.formAction`
209204

210205
Tells you the action url the form is being submitted to.
@@ -229,15 +224,10 @@ fetcher.formMethod; // "post"
229224

230225
<docs-warning>The `fetcher.formMethod` field is lowercase without the `future.v7_normalizeFormMethod` [Future Flag][api-development-strategy]. This is being normalized to uppercase to align with the `fetch()` behavior in v7, so please upgrade your React Router v6 applications to adopt the uppercase HTTP methods.</docs-warning>
231226

232-
## `fetcher.payload`
233-
234-
Any POST, PUT, PATCH, or DELETE that started from a `fetcher.submit(payload, { encType: null })` will have your `payload` value represented in `fetcher.payload`.
235-
236227
[loader]: ../route/loader
237228
[action]: ../route/action
238229
[pickingarouter]: ../routers/picking-a-router
239230
[indexsearchparam]: ../guides/index-search-param
240231
[link]: ../components/link
241232
[form]: ../components/form
242233
[api-development-strategy]: ../guides/api-development-strategy
243-
[use-submit]: ./use-submit.md

docs/hooks/use-navigation.md

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ function SomeComponent() {
2323
navigation.state;
2424
navigation.location;
2525
navigation.formData;
26-
navigation.payload;
2726
navigation.formAction;
2827
navigation.formMethod;
2928
}
@@ -91,14 +90,8 @@ let isRedirecting =
9190

9291
Any POST, PUT, PATCH, or DELETE navigation that started from a `<Form>` or `useSubmit` will have your form's submission data attached to it. This is primarily useful to build "Optimistic UI" with the `submission.formData` [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object.
9392

94-
If you opt-out of serialization using `encType: null`, then `navigation.formData` will be `undefined` and your data will be exposed on `navigation.payload`.
95-
9693
In the case of a GET form submission, `formData` will be empty and the data will be reflected in `navigation.location.search`.
9794

98-
## `navigation.payload`
99-
100-
Any POST, PUT, PATCH, or DELETE navigation that started from a `useSubmit(payload, { encType: null })` will have your `payload` value represented in `navigation.payload`.
101-
10295
## `navigation.location`
10396

10497
This tells you what the next [location][location] is going to be.

docs/hooks/use-submit.md

Lines changed: 0 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -78,50 +78,6 @@ formData.append("cheese", "gouda");
7878
submit(formData);
7979
```
8080

81-
### Payload Serialization
82-
83-
You may also submit raw JSON to your `action` and the default behavior will be to encode the key/values into `FormData`:
84-
85-
```tsx
86-
let obj = { key: "value" };
87-
submit(obj); // -> request.formData()
88-
```
89-
90-
You may also choose which type of serialization you'd like via the `encType` option:
91-
92-
```tsx
93-
let obj = { key: "value" };
94-
submit(obj, {
95-
encType: "application/x-www-form-urlencoded",
96-
}); // -> request.formData()
97-
```
98-
99-
```tsx
100-
let obj = { key: "value" };
101-
submit(obj, { encType: "application/json" }); // -> request.json()
102-
```
103-
104-
```tsx
105-
let text = "Plain ol' text";
106-
submit(obj, { encType: "text/plain" }); // -> request.text()
107-
```
108-
109-
<docs-warn>In future versions of React Router, the default behavior will not serialize raw JSON payloads. If you are submitting raw JSON today it's recommended to specify an explicit `encType`.</docs-warn>
110-
111-
### Opting out of serialization
112-
113-
Sometimes in a client-side application, it's overkill to require serialization into `request.formData` when you have a raw JSON object in your component and want to submit it to your `action` directly. If you'd like to opt out of serialization, you can pass `encType: null` to your second options argument, and your data will be sent to your action function verbatim as a `payload` parameter:
114-
115-
```tsx
116-
let obj = { key: "value" };
117-
submit(obj, { encType: null });
118-
119-
function action({ request, payload }) {
120-
// payload is `obj` from your component
121-
// request.body === null
122-
}
123-
```
124-
12581
## Submit options
12682

12783
The second argument is a set of options that map directly to form submission attributes:

docs/route/action.md

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -101,22 +101,6 @@ formData.get("lyrics");
101101

102102
For more information on `formData` see [Working with FormData][workingwithformdata].
103103

104-
### Opt-in serialization types
105-
106-
Note that when using [`useSubmit`][usesubmit] you may also pass `encType: "application/json"` or `encType: "text/plain"` to instead serialize your payload into `request.json()` or `request.text()`.
107-
108-
## `payload`
109-
110-
A `payload` is provided to your action when you submit imperatively with [`useSubmit`][usesubmit] and provide a raw javascript value. This value might also be serialized into the request depending on the `encType`.
111-
112-
```jsx
113-
function Component {
114-
let submit = useSubmit();
115-
submit({ key: "value" }, { encType: null });
116-
// action payload is { key: 'value' }
117-
}
118-
```
119-
120104
## Returning Responses
121105

122106
While you can return anything you want from an action and get access to it from [`useActionData`][useactiondata], you can also return a web [Response][response].
@@ -160,6 +144,5 @@ For more details and expanded use cases, read the [errorElement][errorelement] d
160144
[form]: ../components/form
161145
[workingwithformdata]: ../guides/form-data
162146
[useactiondata]: ../hooks/use-action-data
163-
[usesubmit]: ../hooks/use-submit
164147
[returningresponses]: ./loader#returning-responses
165148
[createbrowserrouter]: ../routers/create-browser-router

docs/route/should-revalidate.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@ interface ShouldRevalidateFunction {
6666
formAction?: Submission["formAction"];
6767
formEncType?: Submission["formEncType"];
6868
formData?: Submission["formData"];
69-
payload?: Submission["payload"];
7069
actionResult?: DataResult;
7170
defaultShouldRevalidate: boolean;
7271
}): boolean;

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,10 +114,10 @@
114114
"none": "15.4 kB"
115115
},
116116
"packages/react-router-dom/dist/react-router-dom.production.min.js": {
117-
"none": "12 kB"
117+
"none": "11.8 kB"
118118
},
119119
"packages/react-router-dom/dist/umd/react-router-dom.production.min.js": {
120-
"none": "17.9 kB"
120+
"none": "17.7 kB"
121121
}
122122
}
123123
}

0 commit comments

Comments
 (0)