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

query.isRefetching

property for that purpose, but looks like it doesn't differentiate between a manual refetch with

query.refetch

query.refetch

and a invalidation with

queryClient.invalidateQueries

queryClient.invalidateQueries

.

My current workaround is creating a React ref that is updated before and after the

refetch

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

TanStack•3y ago•

4 replies

sacred-rose

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

query.isRefetching

property for that purpose, but looks like it doesn't differentiate between a manual refetch with

query.refetch

query.refetch

and a invalidation with

queryClient.invalidateQueries

queryClient.invalidateQueries

.

My current workaround is creating a React ref that is updated before and after the

refetch

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

Query manual refetch indicator

Similar Threads

Query manual refetch indicator

Similar Threads

Similar Threads

Similar Threads