Skip to content

Instantly share code, notes, and snippets.

@Luccasoli
Created May 14, 2021 23:44
Show Gist options
  • Save Luccasoli/9b4ec6fbe87a702d9e87a09fa0b38d59 to your computer and use it in GitHub Desktop.
Save Luccasoli/9b4ec6fbe87a702d9e87a09fa0b38d59 to your computer and use it in GitHub Desktop.
useQuery layer implementing refetchOnWindowFocus in react-native project using react-navigation
import { useFocusEffect } from '@react-navigation/core';
import { useCallback } from 'react';
import {
QueryFunction,
QueryKey,
useQuery,
UseQueryOptions,
UseQueryResult,
} from 'react-query';
export function useReactNavigationQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey
>(
queryKey: TQueryKey,
queryFn: QueryFunction<TQueryFnData, TQueryKey>,
options?: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
): UseQueryResult<TData, TError> {
const useQueryReturn = useQuery(queryKey, queryFn, options);
useFocusEffect(
useCallback(() => {
if (
((options?.refetchOnWindowFocus && useQueryReturn.isStale) ||
options?.refetchOnWindowFocus === 'always') &&
options.enabled !== false
)
useQueryReturn.refetch();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [options?.enabled, options?.refetchOnWindowFocus]),
);
return useQueryReturn;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment