From f84064c68af2928a74d0be7694330335b3bb9c99 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Mon, 24 Apr 2023 16:34:13 +0200 Subject: [PATCH 1/4] feat: rename throwErrors to throwOnError to be aligned with the options we already have on imperative methods, like `invalidateQueries` --- docs/react/guides/migrating-to-v5.md | 4 ++-- docs/react/guides/suspense.md | 4 ++-- docs/react/reference/QueryClient.md | 2 +- .../reference/QueryErrorResetBoundary.md | 2 +- docs/react/reference/useMutation.md | 6 ++--- docs/react/reference/useQuery.md | 6 ++--- docs/solid/overview.md | 2 +- packages/query-core/src/queryClient.ts | 4 ++-- packages/query-core/src/queryObserver.ts | 2 +- packages/query-core/src/types.ts | 10 ++++----- .../QueryResetErrorBoundary.test.tsx | 22 +++++++++---------- .../src/__tests__/suspense.test.tsx | 12 +++++----- .../src/__tests__/useMutation.test.tsx | 8 +++---- .../src/__tests__/useQueries.test.tsx | 18 +++++++-------- .../src/__tests__/useQuery.test.tsx | 12 +++++----- .../react-query/src/errorBoundaryUtils.ts | 10 ++++----- packages/react-query/src/useBaseQuery.ts | 2 +- packages/react-query/src/useMutation.ts | 2 +- packages/react-query/src/useQueries.ts | 2 +- .../src/__tests__/createMutation.test.tsx | 8 +++---- .../src/__tests__/createQuery.test.tsx | 12 +++++----- .../src/__tests__/suspense.test.tsx | 12 +++++----- packages/solid-query/src/createBaseQuery.ts | 4 ++-- packages/solid-query/src/createMutation.ts | 2 +- 24 files changed, 84 insertions(+), 84 deletions(-) diff --git a/docs/react/guides/migrating-to-v5.md b/docs/react/guides/migrating-to-v5.md index feb536f13c..e8cdfdbfe4 100644 --- a/docs/react/guides/migrating-to-v5.md +++ b/docs/react/guides/migrating-to-v5.md @@ -202,9 +202,9 @@ const queryClient = new QueryClient({ }) ``` -### The `useErrorBoundary` option has been renamed to `throwErrors` +### The `useErrorBoundary` option has been renamed to `throwOnError` -To make the `useErrorBoundary` option more framework-agnostic and avoid confusion with the established React function prefix "`use`" for hooks and the "ErrorBoundary" component name, it has been renamed to `throwErrors` to more accurately reflect its functionality. +To make the `useErrorBoundary` option more framework-agnostic and avoid confusion with the established React function prefix "`use`" for hooks and the "ErrorBoundary" component name, it has been renamed to `throwOnError` to more accurately reflect its functionality. ### TypeScript: `Error` is now the default type for errors instead of `unknown` diff --git a/docs/react/guides/suspense.md b/docs/react/guides/suspense.md index 63f692e30a..5607044c1c 100644 --- a/docs/react/guides/suspense.md +++ b/docs/react/guides/suspense.md @@ -41,11 +41,11 @@ useQuery({ queryKey, queryFn, suspense: true }) When using suspense mode, `status` states and `error` objects are not needed and are then replaced by usage of the `React.Suspense` component (including the use of the `fallback` prop and React error boundaries for catching errors). Please read the [Resetting Error Boundaries](#resetting-error-boundaries) and look at the [Suspense Example](https://codesandbox.io/s/github/tannerlinsley/react-query/tree/main/examples/react/suspense) for more information on how to set up suspense mode. -In addition to queries behaving differently in suspense mode, mutations also behave a bit differently. By default, instead of supplying the `error` variable when a mutation fails, it will be thrown during the next render of the component it's used in and propagate to the nearest error boundary, similar to query errors. If you wish to disable this, you can set the `throwErrors` option to `false`. If you wish that errors are not thrown at all, you can set the `throwOnError` option to `false` as well! +In addition to queries behaving differently in suspense mode, mutations also behave a bit differently. By default, instead of supplying the `error` variable when a mutation fails, it will be thrown during the next render of the component it's used in and propagate to the nearest error boundary, similar to query errors. If you wish to disable this, you can set the `throwOnError` option to `false`. If you wish that errors are not thrown at all, you can set the `throwOnError` option to `false` as well! ## Resetting Error Boundaries -Whether you are using **suspense** or **throwErrors** in your queries, you will need a way to let queries know that you want to try again when re-rendering after some error occurred. +Whether you are using **suspense** or **throwOnError** in your queries, you will need a way to let queries know that you want to try again when re-rendering after some error occurred. Query errors can be reset with the `QueryErrorResetBoundary` component or with the `useQueryErrorResetBoundary` hook. diff --git a/docs/react/reference/QueryClient.md b/docs/react/reference/QueryClient.md index 3120fea1f7..9991f21d16 100644 --- a/docs/react/reference/QueryClient.md +++ b/docs/react/reference/QueryClient.md @@ -91,7 +91,7 @@ try { **Options** -The options for `fetchQuery` are exactly the same as those of [`useQuery`](../reference/useQuery), except the following: `enabled, refetchInterval, refetchIntervalInBackground, refetchOnWindowFocus, refetchOnReconnect, notifyOnChangeProps, onSuccess, onError, onSettled, throwErrors, select, suspense, placeholderData`; which are strictly for useQuery and useInfiniteQuery. You can check the [source code](https://github.com/tannerlinsley/react-query/blob/361935a12cec6f36d0bd6ba12e84136c405047c5/src/core/types.ts#L83) for more clarity. +The options for `fetchQuery` are exactly the same as those of [`useQuery`](../reference/useQuery), except the following: `enabled, refetchInterval, refetchIntervalInBackground, refetchOnWindowFocus, refetchOnReconnect, notifyOnChangeProps, onSuccess, onError, onSettled, throwOnError, select, suspense, placeholderData`; which are strictly for useQuery and useInfiniteQuery. You can check the [source code](https://github.com/tannerlinsley/react-query/blob/361935a12cec6f36d0bd6ba12e84136c405047c5/src/core/types.ts#L83) for more clarity. **Returns** diff --git a/docs/react/reference/QueryErrorResetBoundary.md b/docs/react/reference/QueryErrorResetBoundary.md index 23acd76157..f2ded225f0 100644 --- a/docs/react/reference/QueryErrorResetBoundary.md +++ b/docs/react/reference/QueryErrorResetBoundary.md @@ -3,7 +3,7 @@ id: QueryErrorResetBoundary title: QueryErrorResetBoundary --- -When using **suspense** or **throwErrors** in your queries, you need a way to let queries know that you want to try again when re-rendering after some error occurred. With the `QueryErrorResetBoundary` component you can reset any query errors within the boundaries of the component. +When using **suspense** or **throwOnError** in your queries, you need a way to let queries know that you want to try again when re-rendering after some error occurred. With the `QueryErrorResetBoundary` component you can reset any query errors within the boundaries of the component. ```tsx import { QueryErrorResetBoundary } from '@tanstack/react-query' diff --git a/docs/react/reference/useMutation.md b/docs/react/reference/useMutation.md index 87941d52de..9931a74cc1 100644 --- a/docs/react/reference/useMutation.md +++ b/docs/react/reference/useMutation.md @@ -31,7 +31,7 @@ const { onSuccess, retry, retryDelay, - throwErrors, + throwOnError, meta, }) @@ -84,8 +84,8 @@ mutate(variables, { - This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the next attempt in milliseconds. - A function like `attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)` applies exponential backoff. - A function like `attempt => attempt * 1000` applies linear backoff. -- `throwErrors: undefined | boolean | (error: TError) => boolean` - - Defaults to the global query config's `throwErrors` value, which is `undefined` +- `throwOnError: undefined | boolean | (error: TError) => boolean` + - Defaults to the global query config's `throwOnError` value, which is `undefined` - Set this to `true` if you want mutation errors to be thrown in the render phase and propagate to the nearest error boundary - Set this to `false` to disable the behavior of throwing errors to the error boundary. - If set to a function, it will be passed the error and should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`) diff --git a/docs/react/reference/useQuery.md b/docs/react/reference/useQuery.md index 39065e3f22..6565f20047 100644 --- a/docs/react/reference/useQuery.md +++ b/docs/react/reference/useQuery.md @@ -56,7 +56,7 @@ const { staleTime, structuralSharing, suspense, - throwErrors, + throwOnError, }) ``` @@ -171,8 +171,8 @@ const { - Defaults to `true` - If set to `false`, structural sharing between query results will be disabled. - If set to a function, the old and new data values will be passed through this function, which should combine them into resolved data for the query. This way, you can retain references from the old data to improve performance even when that data contains non-serializable values. -- `throwErrors: undefined | boolean | (error: TError, query: Query) => boolean` - - Defaults to the global query config's `throwErrors` value, which is `undefined` +- `throwOnError: undefined | boolean | (error: TError, query: Query) => boolean` + - Defaults to the global query config's `throwOnError` value, which is `undefined` - Set this to `true` if you want errors to be thrown in the render phase and propagate to the nearest error boundary - Set this to `false` to disable `suspense`'s default behavior of throwing errors to the error boundary. - If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`) diff --git a/docs/solid/overview.md b/docs/solid/overview.md index 3f9dc0d300..0e74b3e331 100644 --- a/docs/solid/overview.md +++ b/docs/solid/overview.md @@ -225,6 +225,6 @@ function App() { ``` - Errors can be caught and reset using SolidJS' native `ErrorBoundary` component. - Set `throwErrors` or the `suspense` option to `true` to make sure errors are thrown to the `ErrorBoundary` + Set `throwOnError` or the `suspense` option to `true` to make sure errors are thrown to the `ErrorBoundary` - Since Property tracking is handled through Solid's fine grained reactivity, options like `notifyOnChangeProps` are not needed diff --git a/packages/query-core/src/queryClient.ts b/packages/query-core/src/queryClient.ts index b7eb8867a6..6112abed94 100644 --- a/packages/query-core/src/queryClient.ts +++ b/packages/query-core/src/queryClient.ts @@ -478,8 +478,8 @@ export class QueryClient { defaultedOptions.refetchOnReconnect = defaultedOptions.networkMode !== 'always' } - if (typeof defaultedOptions.throwErrors === 'undefined') { - defaultedOptions.throwErrors = !!defaultedOptions.suspense + if (typeof defaultedOptions.throwOnError === 'undefined') { + defaultedOptions.throwOnError = !!defaultedOptions.suspense } return defaultedOptions as DefaultedQueryObserverOptions< diff --git a/packages/query-core/src/queryObserver.ts b/packages/query-core/src/queryObserver.ts index 63023f1840..e80a530d3a 100644 --- a/packages/query-core/src/queryObserver.ts +++ b/packages/query-core/src/queryObserver.ts @@ -593,7 +593,7 @@ export class QueryObserver< const includedProps = new Set(notifyOnChangeProps ?? this.#trackedProps) - if (this.options.throwErrors) { + if (this.options.throwOnError) { includedProps.add('error') } diff --git a/packages/query-core/src/types.ts b/packages/query-core/src/types.ts index d07fcb8e55..1bcac85cd3 100644 --- a/packages/query-core/src/types.ts +++ b/packages/query-core/src/types.ts @@ -154,7 +154,7 @@ export interface InfiniteQueryPageParamsOptions< getNextPageParam: GetNextPageParamFunction } -export type ThrowErrors< +export type throwOnError< TQueryFnData, TError, TQueryData, @@ -266,7 +266,7 @@ export interface QueryObserverOptions< * If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`). * Defaults to `false`. */ - throwErrors?: ThrowErrors + throwOnError?: throwOnError /** * This option can be used to transform or select a part of the data returned by the query function. */ @@ -297,7 +297,7 @@ export type DefaultedQueryObserverOptions< TQueryKey extends QueryKey = QueryKey, > = WithRequired< QueryObserverOptions, - 'throwErrors' | 'refetchOnReconnect' + 'throwOnError' | 'refetchOnReconnect' > export interface InfiniteQueryObserverOptions< @@ -333,7 +333,7 @@ export type DefaultedInfiniteQueryObserverOptions< TQueryKey, TPageParam >, - 'throwErrors' | 'refetchOnReconnect' + 'throwOnError' | 'refetchOnReconnect' > export interface FetchQueryOptions< @@ -636,7 +636,7 @@ export interface MutationObserverOptions< TVariables = void, TContext = unknown, > extends MutationOptions { - throwErrors?: boolean | ((error: TError) => boolean) + throwOnError?: boolean | ((error: TError) => boolean) } export interface MutateOptions< diff --git a/packages/react-query/src/__tests__/QueryResetErrorBoundary.test.tsx b/packages/react-query/src/__tests__/QueryResetErrorBoundary.test.tsx index 8dbac43628..ed2ff6486b 100644 --- a/packages/react-query/src/__tests__/QueryResetErrorBoundary.test.tsx +++ b/packages/react-query/src/__tests__/QueryResetErrorBoundary.test.tsx @@ -38,7 +38,7 @@ describe('QueryErrorResetBoundary', () => { } }, retry: false, - throwErrors: true, + throwOnError: true, }) return
{data}
} @@ -97,7 +97,7 @@ describe('QueryErrorResetBoundary', () => { }, retry: false, enabled: !succeed, - throwErrors: true, + throwOnError: true, }) return (
@@ -163,7 +163,7 @@ describe('QueryErrorResetBoundary', () => { }, retry: false, enabled, - throwErrors: true, + throwOnError: true, }) React.useEffect(() => { @@ -221,7 +221,7 @@ describe('QueryErrorResetBoundary', () => { }, retry: false, enabled: false, - throwErrors: true, + throwOnError: true, }) return ( @@ -289,7 +289,7 @@ describe('QueryErrorResetBoundary', () => { } }, retry: false, - throwErrors: true, + throwOnError: true, }) return
{data}
} @@ -347,7 +347,7 @@ describe('QueryErrorResetBoundary', () => { } }, retry: false, - throwErrors: true, + throwOnError: true, initialData: 'initial', }) return
{data}
@@ -408,7 +408,7 @@ describe('QueryErrorResetBoundary', () => { } }, retry: false, - throwErrors: true, + throwOnError: true, }) return
{data}
} @@ -471,7 +471,7 @@ describe('QueryErrorResetBoundary', () => { throw new Error('Error') }, retry: false, - throwErrors: true, + throwOnError: true, }) return
{data}
} @@ -624,7 +624,7 @@ describe('QueryErrorResetBoundary', () => { } }, retry: false, - throwErrors: true, + throwOnError: true, }) return
{data}
} @@ -685,7 +685,7 @@ describe('QueryErrorResetBoundary', () => { } }, retry: false, - throwErrors: true, + throwOnError: true, retryOnMount: true, }, ], @@ -748,7 +748,7 @@ describe('QueryErrorResetBoundary', () => { } }, retry: false, - throwErrors: true, + throwOnError: true, retryOnMount: true, suspense: true, }, diff --git a/packages/react-query/src/__tests__/suspense.test.tsx b/packages/react-query/src/__tests__/suspense.test.tsx index 204a363c49..864feefc23 100644 --- a/packages/react-query/src/__tests__/suspense.test.tsx +++ b/packages/react-query/src/__tests__/suspense.test.tsx @@ -534,7 +534,7 @@ describe("useQuery's in Suspense mode", () => { consoleMock.mockRestore() }) - it('should not throw errors to the error boundary when throwErrors: false', async () => { + it('should not throw errors to the error boundary when throwOnError: false', async () => { const key = queryKey() function Page() { @@ -546,7 +546,7 @@ describe("useQuery's in Suspense mode", () => { }, retry: false, suspense: true, - throwErrors: false, + throwOnError: false, }) return
rendered
} @@ -573,7 +573,7 @@ describe("useQuery's in Suspense mode", () => { await waitFor(() => rendered.getByText('rendered')) }) - it('should throw errors to the error boundary when a throwErrors function returns true', async () => { + it('should throw errors to the error boundary when a throwOnError function returns true', async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) @@ -588,7 +588,7 @@ describe("useQuery's in Suspense mode", () => { }, retry: false, suspense: true, - throwErrors: (err) => err.message !== 'Local Error', + throwOnError: (err) => err.message !== 'Local Error', }) return
rendered
} @@ -616,7 +616,7 @@ describe("useQuery's in Suspense mode", () => { consoleMock.mockRestore() }) - it('should not throw errors to the error boundary when a throwErrors function returns false', async () => { + it('should not throw errors to the error boundary when a throwOnError function returns false', async () => { const key = queryKey() function Page() { @@ -628,7 +628,7 @@ describe("useQuery's in Suspense mode", () => { }, retry: false, suspense: true, - throwErrors: (err) => err.message !== 'Local Error', + throwOnError: (err) => err.message !== 'Local Error', }) return
rendered
} diff --git a/packages/react-query/src/__tests__/useMutation.test.tsx b/packages/react-query/src/__tests__/useMutation.test.tsx index ac3d99a37f..a1650bfc80 100644 --- a/packages/react-query/src/__tests__/useMutation.test.tsx +++ b/packages/react-query/src/__tests__/useMutation.test.tsx @@ -688,7 +688,7 @@ describe('useMutation', () => { fireEvent.click(getByText('unmount')) }) - it('should be able to throw an error when throwErrors is set to true', async () => { + it('should be able to throw an error when throwOnError is set to true', async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) @@ -699,7 +699,7 @@ describe('useMutation', () => { err.stack = '' return Promise.reject(err) }, - throwErrors: true, + throwOnError: true, }) return ( @@ -735,7 +735,7 @@ describe('useMutation', () => { consoleMock.mockRestore() }) - it('should be able to throw an error when throwErrors is a function that returns true', async () => { + it('should be able to throw an error when throwOnError is a function that returns true', async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) @@ -747,7 +747,7 @@ describe('useMutation', () => { err.stack = '' return Promise.reject(err) }, - throwErrors: () => { + throwOnError: () => { boundary = !boundary return !boundary }, diff --git a/packages/react-query/src/__tests__/useQueries.test.tsx b/packages/react-query/src/__tests__/useQueries.test.tsx index 4456a03c80..f86b9d2301 100644 --- a/packages/react-query/src/__tests__/useQueries.test.tsx +++ b/packages/react-query/src/__tests__/useQueries.test.tsx @@ -644,7 +644,7 @@ describe('useQueries', () => { } }) - it("should throw error if in one of queries' queryFn throws and throwErrors is in use", async () => { + it("should throw error if in one of queries' queryFn throws and throwOnError is in use", async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) @@ -661,14 +661,14 @@ describe('useQueries', () => { queryFn: () => Promise.reject( new Error( - 'this should not throw because throwErrors is not set', + 'this should not throw because throwOnError is not set', ), ), }, { queryKey: key2, queryFn: () => Promise.reject(new Error('single query error')), - throwErrors: true, + throwOnError: true, retry: false, }, { @@ -681,7 +681,7 @@ describe('useQueries', () => { Promise.reject( new Error('this should not throw because query#2 already did'), ), - throwErrors: true, + throwOnError: true, retry: false, }, ], @@ -709,7 +709,7 @@ describe('useQueries', () => { consoleMock.mockRestore() }) - it("should throw error if in one of queries' queryFn throws and throwErrors function resolves to true", async () => { + it("should throw error if in one of queries' queryFn throws and throwOnError function resolves to true", async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) @@ -726,10 +726,10 @@ describe('useQueries', () => { queryFn: () => Promise.reject( new Error( - 'this should not throw because throwErrors function resolves to false', + 'this should not throw because throwOnError function resolves to false', ), ), - throwErrors: () => false, + throwOnError: () => false, retry: false, }, { @@ -739,7 +739,7 @@ describe('useQueries', () => { { queryKey: key3, queryFn: () => Promise.reject(new Error('single query error')), - throwErrors: () => true, + throwOnError: () => true, retry: false, }, { @@ -748,7 +748,7 @@ describe('useQueries', () => { Promise.reject( new Error('this should not throw because query#3 already did'), ), - throwErrors: true, + throwOnError: true, retry: false, }, ], diff --git a/packages/react-query/src/__tests__/useQuery.test.tsx b/packages/react-query/src/__tests__/useQuery.test.tsx index 3df0c0685b..045c128419 100644 --- a/packages/react-query/src/__tests__/useQuery.test.tsx +++ b/packages/react-query/src/__tests__/useQuery.test.tsx @@ -2747,7 +2747,7 @@ describe('useQuery', () => { await waitFor(() => rendered.getByText('Error test jaylen')) }) - it('should throw error if queryFn throws and throwErrors is in use', async () => { + it('should throw error if queryFn throws and throwOnError is in use', async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) @@ -2758,7 +2758,7 @@ describe('useQuery', () => { queryKey: key, queryFn: () => Promise.reject(new Error('Error test jaylen')), retry: false, - throwErrors: true, + throwOnError: true, }) return ( @@ -2780,7 +2780,7 @@ describe('useQuery', () => { consoleMock.mockRestore() }) - it('should update with data if we observe no properties and throwErrors', async () => { + it('should update with data if we observe no properties and throwOnError', async () => { const key = queryKey() let result: UseQueryResult | undefined @@ -2789,7 +2789,7 @@ describe('useQuery', () => { const query = useQuery({ queryKey: key, queryFn: () => Promise.resolve('data'), - throwErrors: true, + throwOnError: true, }) React.useEffect(() => { @@ -2817,7 +2817,7 @@ describe('useQuery', () => { queryFn: () => Promise.reject(new Error('Local Error')), retry: false, - throwErrors: (err) => err.message !== 'Local Error', + throwOnError: (err) => err.message !== 'Local Error', }) return ( @@ -2852,7 +2852,7 @@ describe('useQuery', () => { queryFn: () => Promise.reject(new Error('Remote Error')), retry: false, - throwErrors: (err) => err.message !== 'Local Error', + throwOnError: (err) => err.message !== 'Local Error', }) return ( diff --git a/packages/react-query/src/errorBoundaryUtils.ts b/packages/react-query/src/errorBoundaryUtils.ts index 634af47ea0..19bb874754 100644 --- a/packages/react-query/src/errorBoundaryUtils.ts +++ b/packages/react-query/src/errorBoundaryUtils.ts @@ -4,7 +4,7 @@ import type { Query, QueryKey, QueryObserverResult, - ThrowErrors, + throwOnError, } from '@tanstack/query-core' import type { QueryErrorResetBoundaryValue } from './QueryErrorResetBoundary' import * as React from 'react' @@ -26,7 +26,7 @@ export const ensurePreventErrorBoundaryRetry = < >, errorResetBoundary: QueryErrorResetBoundaryValue, ) => { - if (options.suspense || options.throwErrors) { + if (options.suspense || options.throwOnError) { // Prevent retrying failed query if the error boundary has not been reset yet if (!errorResetBoundary.isReset()) { options.retryOnMount = false @@ -51,18 +51,18 @@ export const getHasError = < >({ result, errorResetBoundary, - throwErrors, + throwOnError, query, }: { result: QueryObserverResult errorResetBoundary: QueryErrorResetBoundaryValue - throwErrors: ThrowErrors + throwOnError: throwOnError query: Query }) => { return ( result.isError && !errorResetBoundary.isReset() && !result.isFetching && - shouldThrowError(throwErrors, [result.error, query]) + shouldThrowError(throwOnError, [result.error, query]) ) } diff --git a/packages/react-query/src/useBaseQuery.ts b/packages/react-query/src/useBaseQuery.ts index d7aefdeba9..7fb7502df6 100644 --- a/packages/react-query/src/useBaseQuery.ts +++ b/packages/react-query/src/useBaseQuery.ts @@ -84,7 +84,7 @@ export function useBaseQuery< getHasError({ result, errorResetBoundary, - throwErrors: defaultedOptions.throwErrors, + throwOnError: defaultedOptions.throwOnError, query: observer.getCurrentQuery(), }) ) { diff --git a/packages/react-query/src/useMutation.ts b/packages/react-query/src/useMutation.ts index c269e24929..e8236769f9 100644 --- a/packages/react-query/src/useMutation.ts +++ b/packages/react-query/src/useMutation.ts @@ -56,7 +56,7 @@ export function useMutation< if ( result.error && - shouldThrowError(observer.options.throwErrors, [result.error]) + shouldThrowError(observer.options.throwOnError, [result.error]) ) { throw result.error } diff --git a/packages/react-query/src/useQueries.ts b/packages/react-query/src/useQueries.ts index 95fc5d75f8..517479a782 100644 --- a/packages/react-query/src/useQueries.ts +++ b/packages/react-query/src/useQueries.ts @@ -243,7 +243,7 @@ export function useQueries( getHasError({ result, errorResetBoundary, - throwErrors: defaultedQueries[index]?.throwErrors ?? false, + throwOnError: defaultedQueries[index]?.throwOnError ?? false, query: observerQueries[index]!, }), ) diff --git a/packages/solid-query/src/__tests__/createMutation.test.tsx b/packages/solid-query/src/__tests__/createMutation.test.tsx index fb0798d27f..7c8876102c 100644 --- a/packages/solid-query/src/__tests__/createMutation.test.tsx +++ b/packages/solid-query/src/__tests__/createMutation.test.tsx @@ -781,7 +781,7 @@ describe('createMutation', () => { fireEvent.click(screen.getByText('unmount')) }) - it('should be able to throw an error when throwErrors is set to true', async () => { + it('should be able to throw an error when throwOnError is set to true', async () => { function Page() { const mutation = createMutation(() => ({ mutationFn: () => { @@ -789,7 +789,7 @@ describe('createMutation', () => { err.stack = '' return Promise.reject(err) }, - throwErrors: true, + throwOnError: true, })) return ( @@ -820,7 +820,7 @@ describe('createMutation', () => { }) }) - it('should be able to throw an error when throwErrors is a function that returns true', async () => { + it('should be able to throw an error when throwOnError is a function that returns true', async () => { let boundary = false function Page() { const mutation = createMutation(() => ({ @@ -829,7 +829,7 @@ describe('createMutation', () => { err.stack = '' return Promise.reject(err) }, - throwErrors: () => { + throwOnError: () => { boundary = !boundary return !boundary }, diff --git a/packages/solid-query/src/__tests__/createQuery.test.tsx b/packages/solid-query/src/__tests__/createQuery.test.tsx index 8a7948766d..f2bcdaced4 100644 --- a/packages/solid-query/src/__tests__/createQuery.test.tsx +++ b/packages/solid-query/src/__tests__/createQuery.test.tsx @@ -2506,7 +2506,7 @@ describe('createQuery', () => { await waitFor(() => screen.getByText('Error test jaylen')) }) - it('should throw error if queryFn throws and throwErrors is in use', async () => { + it('should throw error if queryFn throws and throwOnError is in use', async () => { const key = queryKey() function Page() { @@ -2514,7 +2514,7 @@ describe('createQuery', () => { queryKey: key, queryFn: () => Promise.reject(new Error('Error test jaylen')), retry: false, - throwErrors: true, + throwOnError: true, })) return ( @@ -2536,7 +2536,7 @@ describe('createQuery', () => { await waitFor(() => screen.getByText('error boundary')) }) - it('should update with data if we observe no properties and throwErrors', async () => { + it('should update with data if we observe no properties and throwOnError', async () => { const key = queryKey() let result: CreateQueryResult | undefined @@ -2545,7 +2545,7 @@ describe('createQuery', () => { const query = createQuery(() => ({ queryKey: key, queryFn: () => Promise.resolve('data'), - throwErrors: true, + throwOnError: true, })) createEffect(() => { @@ -2574,7 +2574,7 @@ describe('createQuery', () => { queryKey: key, queryFn: () => Promise.reject(new Error('Local Error')), retry: false, - throwErrors: (err) => err.message !== 'Local Error', + throwOnError: (err) => err.message !== 'Local Error', })) return ( @@ -2605,7 +2605,7 @@ describe('createQuery', () => { queryKey: key, queryFn: () => Promise.reject(new Error('Remote Error')), retry: false, - throwErrors: (err) => err.message !== 'Local Error', + throwOnError: (err) => err.message !== 'Local Error', })) return ( diff --git a/packages/solid-query/src/__tests__/suspense.test.tsx b/packages/solid-query/src/__tests__/suspense.test.tsx index b905b2d485..9635d4bab9 100644 --- a/packages/solid-query/src/__tests__/suspense.test.tsx +++ b/packages/solid-query/src/__tests__/suspense.test.tsx @@ -499,7 +499,7 @@ describe("useQuery's in Suspense mode", () => { await waitFor(() => screen.getByText('error boundary')) }) - it('should not throw errors to the error boundary when throwErrors: false', async () => { + it('should not throw errors to the error boundary when throwOnError: false', async () => { const key = queryKey() function Page() { @@ -510,7 +510,7 @@ describe("useQuery's in Suspense mode", () => { throw new Error('Suspense Error a2x') }, retry: false, - throwErrors: false, + throwOnError: false, })) // read state.data to trigger suspense. @@ -548,7 +548,7 @@ describe("useQuery's in Suspense mode", () => { await waitFor(() => screen.getByText('rendered')) }) - it('should throw errors to the error boundary when a throwErrors function returns true', async () => { + it('should throw errors to the error boundary when a throwOnError function returns true', async () => { const key = queryKey() function Page() { @@ -559,7 +559,7 @@ describe("useQuery's in Suspense mode", () => { return Promise.reject(new Error('Remote Error')) }, retry: false, - throwErrors: (err) => err.message !== 'Local Error', + throwOnError: (err) => err.message !== 'Local Error', })) // read state.data to trigger suspense. @@ -597,7 +597,7 @@ describe("useQuery's in Suspense mode", () => { await waitFor(() => screen.getByText('error boundary')) }) - it('should not throw errors to the error boundary when a throwErrors function returns false', async () => { + it('should not throw errors to the error boundary when a throwOnError function returns false', async () => { const key = queryKey() function Page() { @@ -610,7 +610,7 @@ describe("useQuery's in Suspense mode", () => { retry: false, suspense: true, - throwErrors: (err) => err.message !== 'Local Error', + throwOnError: (err) => err.message !== 'Local Error', })) // read state.data to trigger suspense. diff --git a/packages/solid-query/src/createBaseQuery.ts b/packages/solid-query/src/createBaseQuery.ts index 1493b86f2d..f884363bad 100644 --- a/packages/solid-query/src/createBaseQuery.ts +++ b/packages/solid-query/src/createBaseQuery.ts @@ -62,7 +62,7 @@ export function createBaseQuery< defaultedOptions.structuralSharing = false if (isServer) { defaultedOptions.retry = false - defaultedOptions.throwErrors = true + defaultedOptions.throwOnError = true } const observer = new Observer(client(), defaultedOptions) @@ -240,7 +240,7 @@ export function createBaseQuery< if ( state.isError && !state.isFetching && - shouldThrowError(observer.options.throwErrors, [ + shouldThrowError(observer.options.throwOnError, [ state.error, observer.getCurrentQuery(), ]) diff --git a/packages/solid-query/src/createMutation.ts b/packages/solid-query/src/createMutation.ts index fe2574cf35..9ed3fb3d15 100644 --- a/packages/solid-query/src/createMutation.ts +++ b/packages/solid-query/src/createMutation.ts @@ -54,7 +54,7 @@ export function createMutation< () => { if ( state.isError && - shouldThrowError(observer.options.throwErrors, [state.error]) + shouldThrowError(observer.options.throwOnError, [state.error]) ) { throw state.error } From 1db7e24aa2e6afde3f3dafdf72242a90da4abf13 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Mon, 24 Apr 2023 16:35:52 +0200 Subject: [PATCH 2/4] docs: fix outdated code reference --- docs/react/reference/QueryClient.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react/reference/QueryClient.md b/docs/react/reference/QueryClient.md index 9991f21d16..2f16578fd4 100644 --- a/docs/react/reference/QueryClient.md +++ b/docs/react/reference/QueryClient.md @@ -91,7 +91,7 @@ try { **Options** -The options for `fetchQuery` are exactly the same as those of [`useQuery`](../reference/useQuery), except the following: `enabled, refetchInterval, refetchIntervalInBackground, refetchOnWindowFocus, refetchOnReconnect, notifyOnChangeProps, onSuccess, onError, onSettled, throwOnError, select, suspense, placeholderData`; which are strictly for useQuery and useInfiniteQuery. You can check the [source code](https://github.com/tannerlinsley/react-query/blob/361935a12cec6f36d0bd6ba12e84136c405047c5/src/core/types.ts#L83) for more clarity. +The options for `fetchQuery` are exactly the same as those of [`useQuery`](../reference/useQuery), except the following: `enabled, refetchInterval, refetchIntervalInBackground, refetchOnWindowFocus, refetchOnReconnect, refetchOnMount, notifyOnChangeProps, throwOnError, select, suspense, placeholderData`; which are strictly for useQuery and useInfiniteQuery. You can check the [source code](https://github.com/TanStack/query/blob/7cd2d192e6da3df0b08e334ea1cf04cd70478827/packages/query-core/src/types.ts#L119) for more clarity. **Returns** From fba755a72bd1fc23c353aa239e5c3661db230aee Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Mon, 24 Apr 2023 16:42:05 +0200 Subject: [PATCH 3/4] chore: rename type --- packages/query-core/src/types.ts | 4 ++-- packages/react-query/src/errorBoundaryUtils.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/query-core/src/types.ts b/packages/query-core/src/types.ts index 1bcac85cd3..08c665b946 100644 --- a/packages/query-core/src/types.ts +++ b/packages/query-core/src/types.ts @@ -154,7 +154,7 @@ export interface InfiniteQueryPageParamsOptions< getNextPageParam: GetNextPageParamFunction } -export type throwOnError< +export type ThrowOnError< TQueryFnData, TError, TQueryData, @@ -266,7 +266,7 @@ export interface QueryObserverOptions< * If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`). * Defaults to `false`. */ - throwOnError?: throwOnError + throwOnError?: ThrowOnError /** * This option can be used to transform or select a part of the data returned by the query function. */ diff --git a/packages/react-query/src/errorBoundaryUtils.ts b/packages/react-query/src/errorBoundaryUtils.ts index 19bb874754..9f4bb5320b 100644 --- a/packages/react-query/src/errorBoundaryUtils.ts +++ b/packages/react-query/src/errorBoundaryUtils.ts @@ -4,7 +4,7 @@ import type { Query, QueryKey, QueryObserverResult, - throwOnError, + ThrowOnError, } from '@tanstack/query-core' import type { QueryErrorResetBoundaryValue } from './QueryErrorResetBoundary' import * as React from 'react' @@ -56,7 +56,7 @@ export const getHasError = < }: { result: QueryObserverResult errorResetBoundary: QueryErrorResetBoundaryValue - throwOnError: throwOnError + throwOnError: ThrowOnError query: Query }) => { return ( From e3bf43f09c5709b667afe88e1fd1a65e32d79ec5 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Mon, 24 Apr 2023 16:44:24 +0200 Subject: [PATCH 4/4] fix: let the refetchInterval function also return undefined and fall back to false if it does --- docs/react/reference/useQuery.md | 2 +- packages/query-core/src/queryObserver.ts | 14 ++++++++------ packages/query-core/src/types.ts | 2 +- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/react/reference/useQuery.md b/docs/react/reference/useQuery.md index 6565f20047..65c6dfba4d 100644 --- a/docs/react/reference/useQuery.md +++ b/docs/react/reference/useQuery.md @@ -101,7 +101,7 @@ 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)` +- `refetchInterval: number | false | ((data: TData | undefined, 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 diff --git a/packages/query-core/src/queryObserver.ts b/packages/query-core/src/queryObserver.ts index e80a530d3a..7f71b70624 100644 --- a/packages/query-core/src/queryObserver.ts +++ b/packages/query-core/src/queryObserver.ts @@ -342,12 +342,14 @@ export class QueryObserver< } #computeRefetchInterval() { - return typeof this.options.refetchInterval === 'function' - ? this.options.refetchInterval( - this.#currentResult.data, - this.#currentQuery, - ) - : this.options.refetchInterval ?? false + return ( + (typeof this.options.refetchInterval === 'function' + ? this.options.refetchInterval( + this.#currentResult.data, + this.#currentQuery, + ) + : this.options.refetchInterval) ?? false + ) } #updateRefetchInterval(nextInterval: number | false): void { diff --git a/packages/query-core/src/types.ts b/packages/query-core/src/types.ts index 08c665b946..5a7361296b 100644 --- a/packages/query-core/src/types.ts +++ b/packages/query-core/src/types.ts @@ -202,7 +202,7 @@ export interface QueryObserverOptions< | (( data: TData | undefined, query: Query, - ) => number | false) + ) => number | false | undefined) /** * If set to `true`, the query will continue to refetch while their tab/window is in the background. * Defaults to `false`.