`staleTime` option prevents optimistic update from rerendering component
TL;DR is, when using Slatejs, and the onChange calls
This only seems to manifest itself when the onChange is being triggered by SlateJS, as a regular input doesn't seem to have the same issues.
Codesandbox reproduction: https://codesandbox.io/p/sandbox/slate-react-query-staletime-bug-fl4s2w?file=%2Fsrc%2Findex.tsx%3A98%2C1
Reproduction steps:
In the example above, enter any character into the text field.
The result line should display whatever your input is + "optimistic", but does not update
Looking at the cached value in the devtools, the optimistic value is stored in the cache, but not reflected in the UI
After the mutation resolves, the mutation value will cause the ui to update as expected.
Potential resolutions:
Removing the second argument here (
Not specifying a
Wrapping either the
someMutation.mutate()onMutate0This only seems to manifest itself when the onChange is being triggered by SlateJS, as a regular input doesn't seem to have the same issues.
Codesandbox reproduction: https://codesandbox.io/p/sandbox/slate-react-query-staletime-bug-fl4s2w?file=%2Fsrc%2Findex.tsx%3A98%2C1
Reproduction steps:
In the example above, enter any character into the text field.
The result line should display whatever your input is + "optimistic", but does not update
Looking at the cached value in the devtools, the optimistic value is stored in the cache, but not reflected in the UI
After the mutation resolves, the mutation value will cause the ui to update as expected.
Potential resolutions:
Removing the second argument here (
{ listeners: false }Not specifying a
staleTimeWrapping either the
setSlateValueexampleMutation.mutatesetTimeout
GitHub
Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query
Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query
