How to distinguish between isRefetching triggered by refetch vs refetchInterval

[nandorojo]

Hey, I have a particular question about showing a loading spinner when someone pulls to refresh.

I have a screen that I'm polling every 1s (refreshInterval: 1000). I don't want to show a loading spinner while it's polling.

However, I also want users to be able to pull to refresh. In those cases, I do want to show the refreshing spinner. So, I think I'd want a pullToRefresh and isPullingToRefresh method.

This is my workaround:

function useRefreshableQuery(key, config) {
  const isRefreshing = useRef(false)
  const query = useQuery(key, {
    ...config,
    refetchInterval: 1000,
    onSettled() {
      isRefreshing.current = false
    }
  })

  const pullToRefresh = () => {
    isRefreshing.current = true
    refetch()
  }

  return Object.assign({}, query, {
    get isPullingToRefresh() {
      return query.isRefetching && isRefreshing.current
    },
    pullToRefresh
  })
}

[TkDodo]

I think your workaround is good. We don't have a distinction of how a fetch is triggered.

[nandorojo]

Thanks for the response @TkDodo. Is there any sort of middleware API for react-query, the way there is for SWR? I could implement this per-hook, but I'm using react-query with a graphql codegen under the hood, so it's a bit hard to create a common wrapper around useQuery.

[TkDodo]

no, we don't have middlewares, sorry.

[ashutoshcf]

@nandorojo I'm facing the same issue and tried your solution. However this doesn't work as expected. isPullingToRefresh just returns the same value as isFetching (i.e. it is true even after a refetechInterval refetch).

Did you do something else to make it work?

[nandorojo]

Can I see your code

[ashutoshcf]

refreshable query function:

function useRefreshableStoriesQuery(
  key: QueryKey,
  fn: QueryFunction,
  config: UseQueryOptions<Story[]>
) {
  const isRefreshing = useRef(false);

  const query = useQuery(key, fn, config);

  const manualRefresh = () => {
    isRefreshing.current = true;
    query.refetch();
  };

  return Object.assign({}, query, {
    get isManuallyRefreshing(): boolean {
      return query.isFetching && !query.isLoading && isRefreshing.current;
    },
    manualRefresh,
  });
}

usage:

const topicStoriesQuery = useRefreshableStoriesQuery(
    [fetchStoriesForTopic, currentTopic?.id],
    () => {
      const selectedStates = stateFilters.filter((value) => value.isSelected);
      const selectedDate = find(dateFilters, { isSelected: true });
      return getStoriesForTopic(
        currentTopic.id,
        selectedDate.key,
        selectedStates.map((state) => state.key)
      );
    },
    { enabled: !!currentTopic, refetchOnWindowFocus: false, refetchInterval: 5000 }
  );

  useEffect(() => {
    topicStoriesQuery.manualRefresh();
  }, [dateFilters, stateFilters]);

The issue here seems to be that isManuallyRefreshing never goes back to false after it is set to true once. My use case requires me to initiate a refetch after a certain filter value changes (present in the useEffect). Then i'm using the isManuallyRefreshing to conditionally render a certain loader.

However the loader still keeps on showing up every 5 seconds (which is the refetchInterval).

[ashutoshcf]

Fixed by replacing the useRefreshableStoriesQuery function with this:

function useRefreshableStoriesQuery(
  key: QueryKey,
  fn: QueryFunction,
  config: UseQueryOptions<Story[]>
) {
  const isRefreshing = useRef(false);

  const query = useQuery(key, fn, config);

  const manualRefresh = () => {
    isRefreshing.current = true;
    query.refetch();
  };

  useEffect(() => {
    if (!query.isFetching) isRefreshing.current = false;
  }, [query.isFetching]);

  return Object.assign({}, query, {
    get isManuallyRefreshing(): boolean {
      return query.isFetching && !query.isLoading && isRefreshing.current;
    },
    manualRefresh,
  });
}

Leaving this here in case someone faces a similar issue.

[RodolfoSilva]

Support to the latest API:

import {useRef} from 'react';

export function usePullToRefresh<
  T extends {
    refetch: () => Promise<unknown>;
    isRefetching: boolean;
  },
>(
  query: T,
): T & {
  isRefetchingFromPulling: boolean;
  pullToRefresh: () => Promise<unknown>;
} {
  const isPullingToRefreshRef = useRef(false);

  const pullToRefresh = () => {
    isPullingToRefreshRef.current = true;
    return query.refetch().finally(() => {
      isPullingToRefreshRef.current = false;
    });
  };

  return {
    ...query,
    get isRefetchingFromPulling() {
      return query.isRefetching && isPullingToRefreshRef.current;
    },
    pullToRefresh,
  };
}

Usage

const {data, isPullingToRefresh, pullToRefresh} = usePullToRefresh(useQuery(...));