From 403699afd10c8e952b213ec1776e8e729e916e15 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Thu, 12 Oct 2023 09:08:40 +0200 Subject: [PATCH] refactor: only pass query to refetchInterval function (#6128) * refactor: only pass query to refetchInterval function this streamlines it with other functions, and avoids typing issues as it previously took transformed data from `select` * test: adapt test because we don't have the types limitation anymore * docs: refetchInterval --- docs/react/guides/migrating-to-v5.md | 11 +++++++++++ docs/react/reference/useQuery.md | 4 ++-- packages/query-core/src/queryObserver.ts | 5 +---- packages/query-core/src/types.ts | 1 - .../react-query/src/__tests__/useQuery.test.tsx | 2 +- .../src/__tests__/useQuery.types.test.tsx | 16 +++++++++------- .../src/__tests__/createQuery.test.tsx | 2 +- 7 files changed, 25 insertions(+), 16 deletions(-) diff --git a/docs/react/guides/migrating-to-v5.md b/docs/react/guides/migrating-to-v5.md index 938b53bd0b..0ba0cfd6ba 100644 --- a/docs/react/guides/migrating-to-v5.md +++ b/docs/react/guides/migrating-to-v5.md @@ -136,6 +136,17 @@ A few notes about how codemod works: `onSuccess`, `onError` and `onSettled` have been removed from Queries. They haven't been touched for Mutations. Please see [this RFC](https://github.com/TanStack/query/discussions/5279) for motivations behind this change and what to do instead. +### The `refetchInteval` callback function only gets `query` passed + +This streamlines how callbacks are invoked (the `refetchOnWindowFocus`, `refetchOnMount` and `refetchOnReconnect` callbacks all only get the query passed as well), and it fixes some typing issues when callbacks get data transformed by `select`. + +```diff +- refetchInterval: number | false | ((data: TData | undefined, query: Query) => number | false | undefined) ++ refetchInterval: number | false | ((query: Query) => number | false | undefined) +``` + +You can still access data with `query.state.data`, however, it will not be data that has been transformed by `select`. If you need to access the transformed data, you can call the transformation again on `query.state.data`. + ### The `remove` method has been removed from useQuery Previously, remove method used to remove the query from the queryCache without informing observers about it. It was best used to remove data imperatively that is no longer needed, e.g. when logging a user out. diff --git a/docs/react/reference/useQuery.md b/docs/react/reference/useQuery.md index 1e9c80403a..96673b3806 100644 --- a/docs/react/reference/useQuery.md +++ b/docs/react/reference/useQuery.md @@ -98,10 +98,10 @@ const { - `queryKeyHashFn: (queryKey: QueryKey) => string` - Optional - If specified, this function is used to hash the `queryKey` to a string. -- `refetchInterval: number | false | ((data: TData | undefined, query: Query) => number | false | undefined)` +- `refetchInterval: number | false | ((query: Query) => number | false | undefined)` - Optional - If set to a number, all queries will continuously refetch at this frequency in milliseconds - - If set to a function, the function will be executed with the latest data and query to compute a frequency + - If set to a function, the function will be executed with the query to compute a frequency - `refetchIntervalInBackground: boolean` - Optional - If set to `true`, queries that are set to continuously refetch with a `refetchInterval` will continue to refetch while their tab/window is in the background diff --git a/packages/query-core/src/queryObserver.ts b/packages/query-core/src/queryObserver.ts index b885c125e0..c145ad2d65 100644 --- a/packages/query-core/src/queryObserver.ts +++ b/packages/query-core/src/queryObserver.ts @@ -368,10 +368,7 @@ export class QueryObserver< #computeRefetchInterval() { return ( (typeof this.options.refetchInterval === 'function' - ? this.options.refetchInterval( - this.#currentResult.data, - this.#currentQuery, - ) + ? this.options.refetchInterval(this.#currentQuery) : this.options.refetchInterval) ?? false ) } diff --git a/packages/query-core/src/types.ts b/packages/query-core/src/types.ts index 517fb38632..57a164e2b7 100644 --- a/packages/query-core/src/types.ts +++ b/packages/query-core/src/types.ts @@ -237,7 +237,6 @@ export interface QueryObserverOptions< | number | false | (( - data: TData | undefined, query: Query, ) => number | false | undefined) /** diff --git a/packages/react-query/src/__tests__/useQuery.test.tsx b/packages/react-query/src/__tests__/useQuery.test.tsx index 98b56d90d9..f72b514b7c 100644 --- a/packages/react-query/src/__tests__/useQuery.test.tsx +++ b/packages/react-query/src/__tests__/useQuery.test.tsx @@ -4146,7 +4146,7 @@ describe('useQuery', () => { await sleep(10) return count++ }, - refetchInterval: (data = 0) => (data < 2 ? 10 : false), + refetchInterval: ({ state: { data = 0 } }) => (data < 2 ? 10 : false), }) states.push(queryInfo) diff --git a/packages/react-query/src/__tests__/useQuery.types.test.tsx b/packages/react-query/src/__tests__/useQuery.types.test.tsx index eb742654e7..620c4bf470 100644 --- a/packages/react-query/src/__tests__/useQuery.types.test.tsx +++ b/packages/react-query/src/__tests__/useQuery.types.test.tsx @@ -47,13 +47,15 @@ describe('initialData', () => { it('it should be possible to define a different TData than TQueryFnData using select with queryOptions spread into useQuery', () => { doNotExecute(() => { - const options = (select?: (data: number) => TData) => - queryOptions({ - queryKey: ['key'], - queryFn: () => Promise.resolve(1), - select, - }) - const query = useQuery(options((data) => data > 1)) + const options = queryOptions({ + queryKey: ['key'], + queryFn: () => Promise.resolve(1), + }) + + const query = useQuery({ + ...options, + select: (data) => data > 1, + }) const result: Expect< Equal diff --git a/packages/solid-query/src/__tests__/createQuery.test.tsx b/packages/solid-query/src/__tests__/createQuery.test.tsx index c8e513463b..a7247d1106 100644 --- a/packages/solid-query/src/__tests__/createQuery.test.tsx +++ b/packages/solid-query/src/__tests__/createQuery.test.tsx @@ -3715,7 +3715,7 @@ describe('createQuery', () => { await sleep(10) return count++ }, - refetchInterval: (data = 0) => (data < 2 ? 10 : false), + refetchInterval: ({ state: { data = 0 } }) => (data < 2 ? 10 : false), })) createRenderEffect(() => {