marmelab / marmelab/react-admin
Unexpected conversion of `Date` to string in optimistic updates in `useUpdate` and Forms
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 26.9k
- Forks
- 5.5k
- Avg merge
- 2d 3h
- Merged PRs (30d)
- 19
Description
What you were expecting:
Hey there, first off, thank you very much for all the great work you are doing on react-admin. I very much appreciate it and love what you have built!
I am experiencing problems due to how react-admin handles optimistic updates and just wanted to raise awarness for this.
The problem lies in the code below here:
https://github.com/marmelab/react-admin/blob/107db17fd690c0611c91a80ac858b5c6c91b3fc2/packages/ra-core/src/dataProvider/useUpdate.ts#L127
// Stringify and parse the data to remove undefined values.
// If we don't do this, an update with { id: undefined } as payload
// would remove the id from the record, which no real data provider does.
const clonedData = JSON.parse(JSON.stringify(data));
I have objects in the form of:
interface Appointment {
start: Date
end: Date
}
Now, I have a form which i use to update these appointments which also outputs start and end as javascript Date types.
I was expecting, that optimisic updates based on this would keep the types intact and save an updated object of the same shape into the query cache.
What happened instead:
When react-admin performs its optimisic update and updates the @tanstack/react-query cache, it does it using the code snippet above to strip all undefined values. Unfortunately in the process, through the JSON.stringify, it also transforms my Dates into strings.
So now I have an appointment in the form of:
interface Appointment {
start: string
end: string
}
in my cache until the response from the server comes along and places a new object with Dates in it again. Unfortunately in the meantime the date from the optimistic updates, leads to unexpected behaviour if it isn't handled correctly.
My question now is: If the only purpose of the JSON.parse(JSON.stringify(...)) is, to remove undefined values. Wouldn't it make sense to recursively remove undefined values and keep the other types intact? I like having Dates everywhere in my application and do the conversion to string right in the API Layer but this behaviour currently messes with that workflow.
What are your thoughts on this? Is this the desired behaviour or could we improve on it?
Thank your very much!
Environment
- React-admin version: latest (5.5.2)
- Last version that did not exhibit the issue (if applicable): -
- React version: -
- Browser: -
- Stack trace (in case of a JS error): -
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/ra-core/src/dataProvider/useUpdate.ts at the referenced line and trace how the optimistic update reaches the query cache. Define and verify the expected behavior for removing undefined values without converting Date instances to strings, including regression coverage for the optimistic update path.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100