How to stop error from wiping data when using placeholderData.

[audunolsen]

I'd like for my UI to persist (keeping relevant data) and showing the error on top. It's pretty confusing and somewhat panic inducing for an end user to see their entire view be replaced w/ an error instead of just showing an error alongside an already established view.

I know InitialData kind of does this, but it reverts data to that initial value when erroring, it doesn't keep its most recent data when erroring. I need to use placeHolderData as this is what (apparently) facilitates keeping previous data in v5.

placeholderData: previousData => previousData,

Am I missing something or is this just not possible w/ current state of API? Easy workarounds?

[TkDodo]

previousData refers to data of the previous query key. This is, per design, only displayed as long as the current query is in-flight. Example:

• you switch from ['user', 1] to ['user', 2].
• it's okay to display data of ['user', 1] while ['user', 2] is loading
• however, once the request for ['user', 2] finishes (successfully or erroneously), it would be weird to keep that data on screen.

essentially, there is nothing to show for ['user', 2] if the fetch failed.

[audunolsen]

And just to better understand; what's the motivation for keeping both error and data when using InitialData but not placeHolderData? Why doesn't that conflict with api-design which states placeholderData should be wiped on error?

[audunolsen]

The data I'm querying is for displaying misc data visualisations where the selected date is the part of the query-key which changes and triggers new fetching. It's just very jarring to see entire view go "poof" when an error is encountered

[TkDodo]

what's the motivation for keeping both error and data when using InitialData but not placeHolderData

initialData puts data into the cache for this queryKey. placholderData does not: https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query

why wouldn't you use initialData for your case?

[audunolsen]

Thanks, I understand the technical difference between the two, I am just not fully understanding why it makes semantically sense to allow displaying data along with an errored queryKey when initialData is set and not keep same behaviour for placeHolderData.

why wouldn't you use initialData for your case?

Because my goal is for the error to be the only changed part of my UI to avoid confusing users in an already busy UI. initialData will make useQuery revert data to that value while in an errored state, but doesn't facilitate for keeping previous data in an errored state. This means that UI will still change drastically because the data contents will change significantly albeit not being fully wiped. I guess I could keep track of previous successful query results and feed it back to initialData but I haven't tested any workarounds yet.

[audunolsen]

Quick note: I do get the semantic difference, it's stated pretty explicitly in your blog; https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query#error-transitions. I guess I'm just a little miffed that placeHolderData can't persist during an error and that there's no easy API compliant way to do this.

Anyways great work and thanks for all the replies.