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•11mo ago

That is the preferred solution for now, keeping the previous data in a state as you are doing

peterkyle01•11mo 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•11mo ago

tried it, still flashing Loading... it's flashing because foundUsers.length === 0 is true when it's refetching

peterkyle01•11mo ago

What if we say isSearchUsersLoading || (isSearchUsersTyping && isSearchUsersFetching) to only show loading when the user is typing and data is being fetched

antoine•11mo 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•11mo ago

You can use state untill we find a workaround that I did the same

Gaming

Programming

need help with keepPreviousData in trpc client / tanstack query