Replies: 12 comments 50 replies
-
Have you considered using the JavaScript Fetch API? |
Beta Was this translation helpful? Give feedback.
-
I've added a patch to add native JSON support to export const action: ActionFunction = async ({ request }) => {
const data = await request.json()
return json({ result: { success: true, message: 'ok' }, posted: data })
}
export default function () {
const fetcher = useFetcher()
const data = fetcher.data
const handleClick = () => {
fetcher.submit(null, {
action: '?index',
method: 'post',
json: { hello: 'world' },
})
}
return (
<div>
<h1>useFetcher with JSON</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
<button onClick={handleClick}>Fetch</button>
</div>
)
} |
Beta Was this translation helpful? Give feedback.
-
I submitted a PR to add this feature to |
Beta Was this translation helpful? Give feedback.
-
Since the beginning I've been considering different enctypes for So if I were to propose anything around this, the API would just be encType: Enctype all the things// Form API, any inputs w/ the same name become an array
<Form method="post" encType="application/json">
<input name="email" />
<input name="password" />
<input type="checkbox" name="brand" value="nike" />
<input type="checkbox" name="brand" value="adidas" />
</Form>
// useSubmit API, just plain JSON
submit(
{ email, name, brand: ["nike", "adidas"] },
{ method: "post", encType: "application/json" }
) And of course, My hesitation here is progressive enhancement, particularly early clicks. We can't just ignore it because w/o JavaScript the browser will ignore the invalid form enctype and send it as Only work with
|
Beta Was this translation helpful? Give feedback.
-
Is this a good idea?When I first started using remix - this feature was something that I kept asking "Why didn't they implement this?" - but the more I used remix, I soon realised. This is by design. Now I'm on the opposite side of the fence - I don't think this should be supported at all. Why FormData is all we needIts often said that a well designed language, framework has an established way of doing things - ideally a single way to do anything. Well for handling user input remix has this sorted (or shall I say HTML had this sorted years ago, but we all forgot) - Coming from a modern React application, our natural instinct is to turn our noses up at the use of If Remix adds first class support for Form JSON data type, it would encourage bad practices, in the use of controlled components and complex react state. Why supporting JSON
|
Beta Was this translation helpful? Give feedback.
-
Can someone ELI5 FormData for me in this case? I read this:
And think, if it "will just work", why not support it? So that leads me to wonder: In what ways is FormData so superior that working with JSON becomes an anti-pattern? Would love to learn more, thanks. |
Beta Was this translation helpful? Give feedback.
-
I get the point. Personally, I like FormData, I like the progressive enhancement philosophy. |
Beta Was this translation helpful? Give feedback.
-
As far as I understand this problem (forgive me for the ignorance) -- there is currently strong typing of data from loader to client, but from client to action the typing is not as strong. This is because The thing that brought me to this discussion was that I want to send a number from the client to the action without having to do A nice workaround seems to be:
|
Beta Was this translation helpful? Give feedback.
-
Just wanted to add my 5 cents to the discussion. I understand the dev's point about nested data structures. However, what bothers me right now - how do we send a Imagine we have such a case, when there's some REST API, and we need to update the entity's state with a PATCH request, sending something like that: // PATCH /entity/1
{"expirationDate": null} Why would we do that? For example if we have the I've seen this pattern many times and as far as I understand, Remix (and React Router v6, which I'm trying to use) Actions don't support such cases. I'm sorry, if I'm missing something, but I wanted to point out this particular pain (I didn't find any earlier mention of this). |
Beta Was this translation helpful? Give feedback.
-
I ended up using fetch() directly and ditching the beauty of the built-in |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
All right I guess I'll resort to good old Axios and setting all the loading states manually! 😅 |
Beta Was this translation helpful? Give feedback.
-
It would be handy to have the option to submit arbitrary JSON with
useFetcher.submit()
. I've got a very complex form with nested arrays that I could technically force everything into hidden fields and use<Form ...>
, but for this use case feel that submitting JSON would be cleaner. Currently the behavior serializes an object into FormData, which is turning an array into[object Object]
.Are there any plans for something like
useFetcher.submit({ myComplexData: [{...}] }, { method: 'post', encType: 'application/json' })
?Beta Was this translation helpful? Give feedback.
All reactions