RTK Query refetch with React Native RefreshControl

[makirby]

How would one go about implementing the common action of pull to refresh with the refetch function on RTK Query hooks?

At the moment it (refetch) is of type () => void so we are unable to await the refetched query, displaying the loader for the duration.

Providing an hook below as an example of how we've used refetch with other libs.

interface Options {
	refetch: () => Promise<void | any>;
}

function useRefreshControls({ refresh }: Options) {
	const [refreshing, setRefreshing] = useState(false);

	const requestRefresh = useCallback(
		async function () {
			try {
				setRefreshing(true);
				await refetch();
			} finally {
				setRefreshing(false);
			}
		},
		[refresh]
	);

	return { refreshing, requestRefresh };
}

And how it would be used with a ScrollView.

const RefreshAwareScrollView: FC<Props> = ({ children, refresh, ...other }) => {
	const { refreshing, requestRefresh } = useRefreshControls({ refresh });

	return (
		<ScrollView
			refreshControl={<RefreshControl refreshing={refreshing} onRefresh={requestRefresh} />}
			{...other}>
			{children}
		</ScrollView>
	);
};

Appreciate any thoughts on this.

[phryneas]

I assume you would just use the isFetching flag from the hook return value - or is there anything preventing you from using that?

See https://redux-toolkit.js.org/rtk-query/usage/queries#query-loading-state

[makirby]

Yeah that was the initial way I've implemented it, however the issue I ran into was for queries with { refetchOnFocus: true } it (the refresh indicator) would appear as the isFetching is set to true again.

Is there is a way of differentiating between queries started manually with refetch and queries started from refetchOnFocus?

[phryneas]

No, internally there is just no difference.

[makirby]

Ah ok damn. I think I can work around it though with some extra setState to indicate a user requested refetch. Will update this once I've tested it out.

[makirby]

Solution for now was to create a separate hook to handle manual refresh passing in the isFetching flag like @phryneas mentioned.

import { useEffect, useMemo, useState } from 'react';

interface Options {
	refresh: () => void;
	isFetching: boolean;
}

const useManualRefresh = ({ refresh, isFetching }: Options) => {
	const [refreshRequested, setRefreshRequested] = useState(false);

	const requestRefresh = () => {
		setRefreshRequested(true);

		refresh();
	};

	useEffect(() => {
		if (refreshRequested === true && isFetching === false) {
			setRefreshRequested(false);
		}
	}, [refreshRequested, isFetching]);

	const refreshing = useMemo(() => {
		return refreshRequested === true && isFetching === true;
	}, [isFetching, refreshRequested]);

	return { requestRefresh, refreshing };
};

export { useManualRefresh };

[Larry877]

Looks clean, are you able to share how this is used in an actual page or component that requires pull to refresh?

[The0racle]

const {
    data,
    refetch,
    isFetching,
  } = useQuery()

  const { requestRefresh, refreshing } = useManualRefresh({
    refresh: refetch,
    isFetching,
  })