feat: new useQuery specifically for react navigation to invalidate !enabled queries on screen re-mount

This commit is contained in:
Fredrik Burmester
2025-01-05 11:56:46 +01:00
parent adfde1a7cd
commit e9336e9a67

View File

@@ -0,0 +1,32 @@
import { useFocusEffect } from "@react-navigation/core";
import {
QueryKey,
useQuery,
UseQueryOptions,
UseQueryResult,
} from "@tanstack/react-query";
import { useCallback } from "react";
export function useReactNavigationQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey
>(
options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): UseQueryResult<TData, TError> {
const useQueryReturn = useQuery(options);
useFocusEffect(
useCallback(() => {
if (
((options.refetchOnWindowFocus && useQueryReturn.isStale) ||
options.refetchOnWindowFocus === "always") &&
options.enabled !== false
)
useQueryReturn.refetch();
}, [options.enabled, options.refetchOnWindowFocus])
);
return useQueryReturn;
}