need help with keepPreviousData in trpc client / tanstack query

API call:
const [userToFind, setUserToFind] = useState("");
const {
data: foundUsers, // array of objects
isFetching: isSearchUsersFetching,
isFetched: isSearchUsersFetched,
} = api.user.searchByUsername.useQuery(userToFind, {
enabled: userToFind.length > 0,
initialData: [],
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
retry: false,
keepPreviousData: true,
});
const [userToFind, setUserToFind] = useState("");
const {
data: foundUsers, // array of objects
isFetching: isSearchUsersFetching,
isFetched: isSearchUsersFetched,
} = api.user.searchByUsername.useQuery(userToFind, {
enabled: userToFind.length > 0,
initialData: [],
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
retry: false,
keepPreviousData: true,
});
rendering foundUsers:
{(isSearchUsersTyping || isSearchUsersFetching) &&
foundUsers.length === 0 ? (
<CardContent className="flex justify-center py-2">
Loading...
</CardContent>
) : foundUsers.length === 0 ? (
<CardContent className="flex justify-center py-2">
Results not found
</CardContent>
) : (
foundUsers.map((u, idx) => (
// jsx
))
)}
{(isSearchUsersTyping || isSearchUsersFetching) &&
foundUsers.length === 0 ? (
<CardContent className="flex justify-center py-2">
Loading...
</CardContent>
) : foundUsers.length === 0 ? (
<CardContent className="flex justify-center py-2">
Results not found
</CardContent>
) : (
foundUsers.map((u, idx) => (
// jsx
))
)}
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:
That is the preferred solution for now, keeping the previous data in a state as you are doing
Jump to solution
6 Replies
Solution
peterkyle01
peterkyle0117mo ago
That is the preferred solution for now, keeping the previous data in a state as you are doing
peterkyle01
peterkyle0117mo ago
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
antoine
antoine17mo ago
tried it, still flashing Loading... it's flashing because foundUsers.length === 0 is true when it's refetching
peterkyle01
peterkyle0117mo ago
What if we say isSearchUsersLoading || (isSearchUsersTyping && isSearchUsersFetching) to only show loading when the user is typing and data is being fetched
antoine
antoine17mo ago
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.
peterkyle01
peterkyle0117mo ago
You can use state untill we find a workaround that I did the same
Want results from more Discord servers?
Add your server