T
TanStack•3y ago
rare-sapphire

Query manual refetch indicator

Hey, guys! I am using a query in react native with the Flatlist pull to refresh functionality, which requires a "refreshing" prop to indicate the data update is in progress. I tried using the query.isRefetching property for that purpose, but looks like it doesn't differentiate between a manual refetch with query.refetch and a invalidation with queryClient.invalidateQueries. My current workaround is creating a React ref that is updated before and after the refetch function execution: 
  const isManualRefetch = React.useRef(false);
  const refreshing = query.isRefetching && isManualRefetch.current;
  const onRefresh = async () => {
    isManualRefetch.current = true;
    await query.refetch();
    isManualRefetch.current = false;
  };
  const isManualRefetch = React.useRef(false);
  const refreshing = query.isRefetching && isManualRefetch.current;
  const onRefresh = async () => {
    isManualRefetch.current = true;
    await query.refetch();
    isManualRefetch.current = false;
  };
But I would like to know if there is a built in alternative to achieve the same behavior
3 Replies
fair-rose
fair-rose•3y ago
no, we don't track a reason why something is refetching+
rare-sapphire
rare-sapphireOP•3y ago
oh.. so I think I will need to stick with the ref workaround...
optimistic-gold
optimistic-gold•3y ago
I'm pretty sure I use a less sketchy technique in my RN app. Works super well. Will check it and share Actually its fairly similar just encapsulated in a hook 
const {isRefreshingManually, refreshManually} = useManualRefresh(query.refetch)
const {isRefreshingManually, refreshManually} = useManualRefresh(query.refetch)

Did you find this page helpful?