fix(react-query): fix queryFn for useRefetchInterval (#25)

Author: DakEnviy

src/core/types/DataManger.ts

@@ -3,6 +3,7 @@ import type {AnyDataSource, DataSourceParams, DataSourceTag} from './DataSource'
 
 export interface DataManager {
     invalidateTag(tag: DataSourceTag, invalidateOptions?: InvalidateOptions): Promise<void>;
+
     invalidateTags(tags: DataSourceTag[], invalidateOptions?: InvalidateOptions): Promise<void>;
 
     invalidateSource<TDataSource extends AnyDataSource>(

src/core/utils/getError.ts

@@ -1,3 +1,3 @@
-export const getError = <T>(states: {error: T | null}[]) => {
+export const getError = <T>(states: {error: T | null}[]): NonNullable<T> | null => {
     return states.find(({error}) => Boolean(error))?.error ?? null;
 };

src/core/utils/getStatus.ts

@@ -2,6 +2,6 @@ import type {DataLoaderStatus} from '../types/DataLoaderStatus';
 
 import {mergeStatuses} from './mergeStatuses';
 
-export const getStatus = (states: {status: DataLoaderStatus}[]) => {
+export const getStatus = (states: {status: DataLoaderStatus}[]): DataLoaderStatus => {
     return mergeStatuses(states.map(({status}) => status));
 };

src/core/utils/hasTag.ts

@@ -1,6 +1,6 @@
 import type {DataSourceKey, DataSourceTag} from '../types/DataSource';
 
-export const hasTag = (key: DataSourceKey, tag: DataSourceTag) => {
+export const hasTag = (key: DataSourceKey, tag: DataSourceTag): boolean => {
     if (!Array.isArray(key)) {
         return false;
     }

src/react-query/ClientDataManager.ts

@@ -109,27 +109,24 @@ export class ClientDataManager implements DataManager {
         );
     }
 
-    private invalidateQueries(
+    protected invalidateQueries(
         filters: InvalidateQueryFilters,
         invalidateOptions?: InvalidateOptions,
     ) {
-        const {repeat} = invalidateOptions || {};
-
         const invalidate = () => this.queryClient.invalidateQueries(filters);
 
-        this.repeatInvalidate(invalidate, repeat);
+        this.repeatInvalidate(invalidate, invalidateOptions?.repeat);
 
         return invalidate();
     }
 
-    private repeatInvalidate(invalidate: () => Promise<void>, repeat?: InvalidateRepeatOptions) {
+    protected repeatInvalidate(invalidate: () => Promise<void>, repeat?: InvalidateRepeatOptions) {
         if (!repeat) {
             return;
         }
-        const {interval, count} = repeat;
 
-        for (let i = 1; i <= count; i++) {
-            setTimeout(invalidate, interval * i);
+        for (let i = 1; i <= repeat.count; i++) {
+            setTimeout(invalidate, repeat.interval * i);
         }
     }
 }

src/react-query/hooks/useQueryContext.ts

@@ -2,7 +2,7 @@ import {useMemo} from 'react';
 
 import {useQueryClient} from '@tanstack/react-query';
 
-import type {QueryDataSourceContext} from '../types';
+import type {QueryDataSourceContext} from '../types/base';
 
 export const useQueryContext = (): QueryDataSourceContext => {
     const queryClient = useQueryClient();

src/react-query/hooks/useQueryData.ts

@@ -3,7 +3,7 @@ import {useInfiniteQueryData} from '../impl/infinite/hooks';
 import type {AnyInfiniteQueryDataSource} from '../impl/infinite/types';
 import {usePlainQueryData} from '../impl/plain/hooks';
 import type {AnyPlainQueryDataSource} from '../impl/plain/types';
-import type {AnyQueryDataSource} from '../types';
+import type {AnyQueryDataSource} from '../types/base';
 import {notReachable} from '../utils/notReachable';
 
 import {useQueryContext} from './useQueryContext';

src/react-query/hooks/useRefetchInterval.ts

@@ -1,63 +1,69 @@
 import React from 'react';
 
-import type {Query, QueryFunction, QueryFunctionContext, SkipToken} from '@tanstack/react-query';
-
-import type {DataSourceError, DataSourceKey, DataSourceResponse} from '../../core';
-import type {AnyQueryDataSource, RefetchInterval} from '../types';
-
-export const useRefetchInterval = <TDataSource extends AnyQueryDataSource, TQueryData, TPageParams>(
-    refetchIntervalOption?: RefetchInterval<
-        DataSourceResponse<TDataSource>,
-        DataSourceError<TDataSource>,
-        TQueryData,
-        DataSourceKey
-    >,
-    queryFnOption?:
-        | QueryFunction<DataSourceResponse<TDataSource>, DataSourceKey, TPageParams>
-        | SkipToken,
-): {
+import type {DefaultError, Query, QueryFunction, QueryKey, SkipToken} from '@tanstack/react-query';
+
+import type {RefetchInterval} from '../types/refetch-interval';
+
+export interface UseRefetchIntervalResult<
+    TQueryFnData = unknown,
+    TError = DefaultError,
+    TQueryData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey,
+    TPageParam = never,
+> {
     refetchInterval?:
         | number
         | false
         | ((
-              query: Query<
-                  DataSourceResponse<TDataSource>,
-                  DataSourceError<TDataSource>,
-                  TQueryData,
-                  DataSourceKey
-              >,
+              query: Query<TQueryFnData, TError, TQueryData, TQueryKey>,
           ) => number | false | undefined);
-    queryFn?:
-        | QueryFunction<DataSourceResponse<TDataSource>, DataSourceKey, TPageParams>
-        | SkipToken;
-} => {
+    queryFn?: QueryFunction<TQueryFnData, TQueryKey, TPageParam> | SkipToken;
+}
+
+export const useRefetchInterval = <
+    TQueryFnData = unknown,
+    TError = DefaultError,
+    TQueryData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey,
+    TPageParam = never,
+>(
+    refetchInterval?: RefetchInterval<TQueryFnData, TError, TQueryData, TQueryKey>,
+    queryFn?: QueryFunction<TQueryFnData, TQueryKey, TPageParam> | SkipToken,
+): UseRefetchIntervalResult<TQueryFnData, TError, TQueryData, TQueryKey, TPageParam> => {
     const count = React.useRef<number>(0);
 
-    const queryFn = React.useMemo(() => {
-        if (typeof queryFnOption === 'function') {
-            return (context: QueryFunctionContext<DataSourceKey, TPageParams>) => {
-                count.current++;
-                return queryFnOption(context);
-            };
+    const actualQueryFn = React.useMemo(() => {
+        if (typeof queryFn === 'function') {
+            return ((context) => {
+                ++count.current;
+                return queryFn(context);
+            }) satisfies UseRefetchIntervalResult<
+                TQueryFnData,
+                TError,
+                TQueryData,
+                TQueryKey,
+                TPageParam
+            >['queryFn'];
         }
-        return undefined;
-    }, [queryFnOption]);
-
-    const refetchInterval = React.useMemo(() => {
-        if (typeof refetchIntervalOption === 'function') {
-            return (
-                query: Query<
-                    DataSourceResponse<TDataSource>,
-                    DataSourceError<TDataSource>,
-                    TQueryData,
-                    DataSourceKey
-                >,
-            ) => {
-                return refetchIntervalOption(query, count.current);
-            };
+
+        return queryFn;
+    }, [queryFn]);
+
+    const actualRefetchInterval = React.useMemo(() => {
+        if (typeof refetchInterval === 'function') {
+            return ((query) => {
+                return refetchInterval(query, count.current);
+            }) satisfies UseRefetchIntervalResult<
+                TQueryFnData,
+                TError,
+                TQueryData,
+                TQueryKey,
+                TPageParam
+            >['refetchInterval'];
         }
-        return refetchIntervalOption;
-    }, [refetchIntervalOption]);
 
-    return {refetchInterval, queryFn};
+        return refetchInterval;
+    }, [refetchInterval]);
+
+    return {queryFn: actualQueryFn, refetchInterval: actualRefetchInterval};
 };

src/react-query/impl/infinite/hooks.ts

@@ -10,69 +10,64 @@ import type {
     DataSourceKey,
     DataSourceOptions,
     DataSourceParams,
+    DataSourceRequest,
     DataSourceResponse,
     DataSourceState,
 } from '../../../core';
 import {useRefetchInterval} from '../../hooks/useRefetchInterval';
 import {normalizeStatus} from '../../utils/normalizeStatus';
 
-import type {
-    AnyInfiniteQueryDataSource,
-    AnyPageParam,
-    InfiniteQueryObserverExtendedOptions,
-} from './types';
+import type {AnyInfiniteQueryDataSource, InfiniteQueryObserverExtendedOptions} from './types';
 import {composeOptions} from './utils';
 
-export const useInfiniteQueryData = <TDataSource extends AnyInfiniteQueryDataSource>(
-    context: DataSourceContext<TDataSource>,
-    dataSource: TDataSource,
-    params: DataSourceParams<TDataSource>,
-    options?: Partial<DataSourceOptions<TDataSource>>,
-): DataSourceState<TDataSource> => {
-    const composedOptions = composeOptions(context, dataSource, params, options);
-
-    const extendedOptions = useInfiniteQueryDataOptions(composedOptions);
-
-    const result = useInfiniteQuery(extendedOptions);
-
-    const transformedData = useMemo<DataSourceState<TDataSource>['data']>(
-        () => result.data?.pages.flat(1) ?? [],
-        [result.data],
-    );
-
-    return {
-        ...result,
-        status: normalizeStatus(result.status, result.fetchStatus),
-        data: transformedData,
-        originalStatus: result.status,
-        originalData: result.data,
-    } as DataSourceState<TDataSource>;
-};
-
-export function useInfiniteQueryDataOptions<TDataSource extends AnyInfiniteQueryDataSource>(
+const useInfiniteQueryDataOptions = <TDataSource extends AnyInfiniteQueryDataSource>(
     composedOptions: InfiniteQueryObserverExtendedOptions<
         DataSourceResponse<TDataSource>,
         DataSourceError<TDataSource>,
-        InfiniteData<DataSourceData<TDataSource>, AnyPageParam>,
+        InfiniteData<DataSourceData<TDataSource>, Partial<DataSourceRequest<TDataSource>>>,
         DataSourceResponse<TDataSource>,
         DataSourceKey,
-        AnyPageParam
+        Partial<DataSourceRequest<TDataSource>>
     >,
 ): InfiniteQueryObserverOptions<
     DataSourceResponse<TDataSource>,
     DataSourceError<TDataSource>,
-    InfiniteData<DataSourceData<TDataSource>, AnyPageParam>,
+    InfiniteData<DataSourceData<TDataSource>, Partial<DataSourceRequest<TDataSource>>>,
     DataSourceResponse<TDataSource>,
     DataSourceKey,
-    AnyPageParam
-> {
+    Partial<DataSourceRequest<TDataSource>>
+> => {
     const {
-        refetchInterval: refetchIntervalOption,
         queryFn: queryFnOption,
+        refetchInterval: refetchIntervalOption,
         ...restOptions
-    } = composedOptions || {};
+    } = composedOptions;
+
+    const {queryFn, refetchInterval} = useRefetchInterval(refetchIntervalOption, queryFnOption);
+
+    return {...restOptions, queryFn, refetchInterval};
+};
+
+export const useInfiniteQueryData = <TDataSource extends AnyInfiniteQueryDataSource>(
+    context: DataSourceContext<TDataSource>,
+    dataSource: TDataSource,
+    params: DataSourceParams<TDataSource>,
+    options?: Partial<DataSourceOptions<TDataSource>>,
+): DataSourceState<TDataSource> => {
+    const extendedOptions = composeOptions(context, dataSource, params, options);
+    const composedOptions = useInfiniteQueryDataOptions(extendedOptions);
+    const state = useInfiniteQuery(composedOptions);
 
-    const {refetchInterval, queryFn} = useRefetchInterval(refetchIntervalOption, queryFnOption);
+    const transformedData = useMemo<DataSourceState<TDataSource>['data']>(
+        () => state.data?.pages.flat(1) ?? [],
+        [state.data],
+    );
 
-    return {...restOptions, refetchInterval, queryFn};
-}
+    return {
+        ...state,
+        status: normalizeStatus(state.status, state.fetchStatus),
+        data: transformedData,
+        originalStatus: state.status,
+        originalData: state.data,
+    } as DataSourceState<TDataSource>;
+};

src/react-query/impl/infinite/types.ts

@@ -1,33 +1,33 @@
 import type {
     DefaultError,
     InfiniteData,
+    InfiniteQueryObserverOptions,
     InfiniteQueryObserverResult,
-    InfiniteQueryPageParamsOptions,
     QueryFunctionContext,
     QueryKey,
 } from '@tanstack/react-query';
 import type {Overwrite} from 'utility-types';
 
 import type {ActualData, DataLoaderStatus, DataSource, DataSourceKey} from '../../../core';
-import type {QueryDataSourceContext} from '../../types';
-import type {QueryObserverExtendedOptions} from '../plain/types';
+import type {QueryDataSourceContext} from '../../types/base';
+import type {QueryDataAdditionalOptions} from '../../types/options';
 
-export interface InfiniteQueryObserverExtendedOptions<
+export type InfiniteQueryObserverExtendedOptions<
     TQueryFnData = unknown,
     TError = DefaultError,
     TData = TQueryFnData,
     TQueryData = TQueryFnData,
     TQueryKey extends QueryKey = QueryKey,
     TPageParam = unknown,
-> extends QueryObserverExtendedOptions<
-            TQueryFnData,
-            TError,
-            TData,
-            InfiniteData<TQueryData, TPageParam>,
-            TQueryKey,
-            TPageParam
-        >,
-        InfiniteQueryPageParamsOptions<TQueryFnData, TPageParam> {}
+> = Overwrite<
+    InfiniteQueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey, TPageParam>,
+    QueryDataAdditionalOptions<
+        TQueryFnData,
+        TError,
+        InfiniteData<TQueryData, TPageParam>,
+        TQueryKey
+    >
+>;
 
 export type InfiniteQueryDataSource<TParams, TRequest, TResponse, TData, TError> = DataSource<
     QueryDataSourceContext,