From 892f96ecb0ad19301bc07f55d3004c7ed138065e Mon Sep 17 00:00:00 2001 From: Vladimir Filosof Date: Wed, 27 Aug 2025 19:44:17 +0300 Subject: [PATCH 1/3] feat: do not call disabled refetch --- src/react-query/impl/infinite/hooks.ts | 6 +++++- src/react-query/impl/plain/hooks.ts | 6 +++++- src/react-query/utils/warnDisabledRefetch.ts | 3 +++ 3 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 src/react-query/utils/warnDisabledRefetch.ts diff --git a/src/react-query/impl/infinite/hooks.ts b/src/react-query/impl/infinite/hooks.ts index 6f30a1b..36300c9 100644 --- a/src/react-query/impl/infinite/hooks.ts +++ b/src/react-query/impl/infinite/hooks.ts @@ -1,6 +1,6 @@ import {useMemo} from 'react'; -import {useInfiniteQuery} from '@tanstack/react-query'; +import {skipToken, useInfiniteQuery} from '@tanstack/react-query'; import type {InfiniteData, InfiniteQueryObserverOptions} from '@tanstack/react-query'; import type { @@ -16,6 +16,7 @@ import type { } from '../../../core'; import {useRefetchInterval} from '../../hooks/useRefetchInterval'; import {normalizeStatus} from '../../utils/normalizeStatus'; +import {warnDisabledRefetch} from '../../utils/warnDisabledRefetch'; import type {AnyInfiniteQueryDataSource, InfiniteQueryObserverExtendedOptions} from './types'; import {composeOptions} from './utils'; @@ -63,11 +64,14 @@ export const useInfiniteQueryData = ; }; diff --git a/src/react-query/impl/plain/hooks.ts b/src/react-query/impl/plain/hooks.ts index b6c4063..3346970 100644 --- a/src/react-query/impl/plain/hooks.ts +++ b/src/react-query/impl/plain/hooks.ts @@ -1,4 +1,4 @@ -import {type QueryObserverOptions, useQuery} from '@tanstack/react-query'; +import {type QueryObserverOptions, skipToken, useQuery} from '@tanstack/react-query'; import type { DataSourceContext, @@ -12,6 +12,7 @@ import type { } from '../../../core'; import {useRefetchInterval} from '../../hooks/useRefetchInterval'; import {normalizeStatus} from '../../utils/normalizeStatus'; +import {warnDisabledRefetch} from '../../utils/warnDisabledRefetch'; import type {AnyPlainQueryDataSource, QueryObserverExtendedOptions} from './types'; import {composeOptions} from './utils'; @@ -52,9 +53,12 @@ export const usePlainQueryData = ( const composedOptions = usePlainQueryDataOptions(extendedOptions); const state = useQuery(composedOptions); + const isDisabled = composedOptions.enabled === false || composedOptions.queryFn === skipToken; + return { ...state, status: normalizeStatus(state.status, state.fetchStatus), originalStatus: state.status, + refetch: isDisabled ? warnDisabledRefetch : state.refetch, } as DataSourceState; }; diff --git a/src/react-query/utils/warnDisabledRefetch.ts b/src/react-query/utils/warnDisabledRefetch.ts new file mode 100644 index 0000000..2960023 --- /dev/null +++ b/src/react-query/utils/warnDisabledRefetch.ts @@ -0,0 +1,3 @@ +export const warnDisabledRefetch = () => { + console.warn('Disabled refetch is called'); +}; From c548a37dcb798fcea3af9627513274425333c111 Mon Sep 17 00:00:00 2001 From: Vladimir Filosof Date: Tue, 9 Sep 2025 00:19:25 +0300 Subject: [PATCH 2/3] feat: correct enabled logic and add tests --- .../__tests__/useQueryData.refetch.test.ts | 180 ++++++++++++++++++ src/react-query/types/options.ts | 5 + src/react-query/utils/warn.ts | 8 + src/react-query/utils/warnDisabledRefetch.ts | 4 +- 4 files changed, 196 insertions(+), 1 deletion(-) create mode 100644 src/react-query/hooks/__tests__/useQueryData.refetch.test.ts create mode 100644 src/react-query/utils/warn.ts diff --git a/src/react-query/hooks/__tests__/useQueryData.refetch.test.ts b/src/react-query/hooks/__tests__/useQueryData.refetch.test.ts new file mode 100644 index 0000000..2e9c9eb --- /dev/null +++ b/src/react-query/hooks/__tests__/useQueryData.refetch.test.ts @@ -0,0 +1,180 @@ +import {QueryClient, useInfiniteQuery, useQuery} from '@tanstack/react-query'; +import {renderHook} from '@testing-library/react'; + +import {idle} from '../../../core'; +import type {AnyInfiniteQueryDataSource} from '../../impl/infinite/types'; +import type {AnyPlainQueryDataSource} from '../../impl/plain/types'; +import {warnDisabledRefetch} from '../../utils/warnDisabledRefetch'; +import {useQueryContext} from '../useQueryContext'; +import {useQueryData} from '../useQueryData'; + +jest.mock('@tanstack/react-query', () => ({ + ...jest.requireActual('@tanstack/react-query'), + useQuery: jest.fn(), + useInfiniteQuery: jest.fn(), +})); + +jest.mock('../useQueryContext'); +jest.mock('../../utils/warnDisabledRefetch'); + +const mockUseQuery = useQuery as jest.MockedFunction; +const mockUseInfiniteQuery = useInfiniteQuery as jest.MockedFunction; +const mockWarnDisabledRefetch = warnDisabledRefetch as jest.MockedFunction< + typeof warnDisabledRefetch +>; + +describe('useQueryData refetch behavior', () => { + const mockQueryClient = new QueryClient(); + const mockContext = {queryClient: mockQueryClient}; + + beforeEach(() => { + jest.clearAllMocks(); + (useQueryContext as jest.Mock).mockReturnValue(mockContext); + }); + + const createMockQueryResult = (refetch = jest.fn()) => ({ + data: 'test-data', + error: null, + status: 'success' as const, + fetchStatus: 'idle' as const, + isLoading: false, + isError: false, + isSuccess: true, + isPending: false, + refetch, + dataUpdatedAt: Date.now(), + errorUpdatedAt: 0, + failureCount: 0, + failureReason: null, + isFetched: true, + isFetchedAfterMount: true, + isFetching: false, + isInitialLoading: false, + isLoadingError: false, + isPaused: false, + isPlaceholderData: false, + isPreviousData: false, + isRefetchError: false, + isRefetching: false, + isStale: false, + promise: Promise.resolve('test-data'), + }); + + const createMockInfiniteResult = (refetch = jest.fn()) => ({ + data: {pages: [['item1'], ['item2']], pageParams: [undefined, 'next-page']}, + error: null, + status: 'success' as const, + fetchStatus: 'idle' as const, + isLoading: false, + isError: false, + isSuccess: true, + isPending: false, + refetch, + hasNextPage: false, + hasPreviousPage: false, + fetchNextPage: jest.fn(), + fetchPreviousPage: jest.fn(), + isFetchingNextPage: false, + isFetchingPreviousPage: false, + dataUpdatedAt: Date.now(), + errorUpdatedAt: 0, + failureCount: 0, + failureReason: null, + isFetched: true, + isFetchedAfterMount: true, + isFetching: false, + isInitialLoading: false, + isLoadingError: false, + isPaused: false, + isPlaceholderData: false, + isPreviousData: false, + isRefetchError: false, + isRefetching: false, + isStale: false, + promise: Promise.resolve({ + pages: [['item1'], ['item2']], + pageParams: [undefined, 'next-page'], + }), + }); + + describe('plain data source', () => { + const plainDataSource: AnyPlainQueryDataSource = { + type: 'plain', + name: 'test-plain', + fetch: jest.fn().mockResolvedValue({data: 'test-data'}), + }; + + it('should use original refetch when no enabled option', () => { + const originalRefetch = jest.fn(); + mockUseQuery.mockReturnValue(createMockQueryResult(originalRefetch) as any); + + const {result} = renderHook(() => useQueryData(plainDataSource, {id: 1})); + + expect(result.current.refetch).toBe(originalRefetch); + expect(result.current.refetch).not.toBe(mockWarnDisabledRefetch); + }); + + it('should use warnDisabledRefetch when enabled: false', () => { + const originalRefetch = jest.fn(); + mockUseQuery.mockReturnValue(createMockQueryResult(originalRefetch) as any); + + const {result} = renderHook(() => + useQueryData(plainDataSource, {id: 1}, {enabled: false}), + ); + + expect(result.current.refetch).toBe(mockWarnDisabledRefetch); + expect(result.current.refetch).not.toBe(originalRefetch); + }); + + it('should use warnDisabledRefetch when params is idle', () => { + const originalRefetch = jest.fn(); + mockUseQuery.mockReturnValue(createMockQueryResult(originalRefetch) as any); + + const {result} = renderHook(() => useQueryData(plainDataSource, idle)); + + expect(result.current.refetch).toBe(mockWarnDisabledRefetch); + expect(result.current.refetch).not.toBe(originalRefetch); + }); + }); + + describe('infinite data source', () => { + const infiniteDataSource: AnyInfiniteQueryDataSource = { + type: 'infinite', + name: 'test-infinite', + fetch: jest.fn().mockResolvedValue({data: ['item1', 'item2']}), + next: jest.fn(), + }; + + it('should use original refetch when no enabled option', () => { + const originalRefetch = jest.fn(); + mockUseInfiniteQuery.mockReturnValue(createMockInfiniteResult(originalRefetch) as any); + + const {result} = renderHook(() => useQueryData(infiniteDataSource, {id: 1})); + + expect(result.current.refetch).toBe(originalRefetch); + expect(result.current.refetch).not.toBe(mockWarnDisabledRefetch); + }); + + it('should use warnDisabledRefetch when enabled: false', () => { + const originalRefetch = jest.fn(); + mockUseInfiniteQuery.mockReturnValue(createMockInfiniteResult(originalRefetch) as any); + + const {result} = renderHook(() => + useQueryData(infiniteDataSource, {id: 1}, {enabled: false}), + ); + + expect(result.current.refetch).toBe(mockWarnDisabledRefetch); + expect(result.current.refetch).not.toBe(originalRefetch); + }); + + it('should use warnDisabledRefetch when params is idle', () => { + const originalRefetch = jest.fn(); + mockUseInfiniteQuery.mockReturnValue(createMockInfiniteResult(originalRefetch) as any); + + const {result} = renderHook(() => useQueryData(infiniteDataSource, idle)); + + expect(result.current.refetch).toBe(mockWarnDisabledRefetch); + expect(result.current.refetch).not.toBe(originalRefetch); + }); + }); +}); diff --git a/src/react-query/types/options.ts b/src/react-query/types/options.ts index d772f72..140f0b6 100644 --- a/src/react-query/types/options.ts +++ b/src/react-query/types/options.ts @@ -9,4 +9,9 @@ export interface QueryDataAdditionalOptions< TQueryKey extends QueryKey = QueryKey, > { refetchInterval?: RefetchInterval; + /** + * @deprecated The use of the enabled option is deprecated. + * It is recommended to use idle as query parameters to control query state. + */ + enabled?: boolean; } diff --git a/src/react-query/utils/warn.ts b/src/react-query/utils/warn.ts new file mode 100644 index 0000000..6a9a726 --- /dev/null +++ b/src/react-query/utils/warn.ts @@ -0,0 +1,8 @@ +export function warn(msg: string) { + if (!msg || process.env.NODE_ENV === 'production') { + return; + } + + // eslint-disable-next-line no-console + console.error(msg); +} diff --git a/src/react-query/utils/warnDisabledRefetch.ts b/src/react-query/utils/warnDisabledRefetch.ts index 2960023..1eaceef 100644 --- a/src/react-query/utils/warnDisabledRefetch.ts +++ b/src/react-query/utils/warnDisabledRefetch.ts @@ -1,3 +1,5 @@ +import {warn} from './warn'; + export const warnDisabledRefetch = () => { - console.warn('Disabled refetch is called'); + warn('Disabled refetch is called'); }; From 9fab5903f1bac968faa0c5334c05016056b9ad19 Mon Sep 17 00:00:00 2001 From: Vladimir Filosof Date: Tue, 16 Sep 2025 10:55:41 +0300 Subject: [PATCH 3/3] fix: change console.error to console.warn --- src/react-query/utils/warn.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/react-query/utils/warn.ts b/src/react-query/utils/warn.ts index 6a9a726..061762f 100644 --- a/src/react-query/utils/warn.ts +++ b/src/react-query/utils/warn.ts @@ -4,5 +4,5 @@ export function warn(msg: string) { } // eslint-disable-next-line no-console - console.error(msg); + console.warn(msg); }