need help with keepPreviousData in trpc client / tanstack query
API call:
rendering
foundUsers
:
I update userToFind
through an input field (its debounced), and I'm trying to prevent Loading...
from flashing when foundUsers
is refetched. I tried keepPreviousData: true
, but it didn't fix this issue. I'm not really sure what the issue could be. I tried staleTime: Infinity
, but that just prevents a refetch. For now, I might keep the previous data in a separate state and render that while foundUsers
is being refetched. Can anyone help with this? Let me know if you need more details.Solution:Jump to solution
That is the preferred solution for now, keeping the previous data in a state as you are doing
6 Replies
Solution
That is the preferred solution for now, keeping the previous data in a state as you are doing
Can you try to introduce isLoading from react query then give it isSearchUsersLoading and then add it to the conditional check where you have isSearchUsersFetching and the others
tried it, still flashing
Loading...
it's flashing because foundUsers.length === 0
is true when it's refetchingWhat if we say isSearchUsersLoading || (isSearchUsersTyping && isSearchUsersFetching) to only show loading when the user is typing and data is being fetched
I don't trigger a fetch until I stop typing, so I want to show
Loading...
when I'm typing for the first time no matter the case. Then if I have results from a fetch, I don't want to show Loading...
anymore as I keep typing to update results. That's why I check the length of the results to prevent Loading...
from flashing when I keep typing.You can use state untill we find a workaround that I did the same