Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: rename throwErrors to throwOnError #5318

Merged
merged 5 commits into from
Apr 28, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/react/guides/migrating-to-v5.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
4 changes: 2 additions & 2 deletions docs/react/guides/suspense.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion docs/react/reference/QueryClient.md
Original file line number Diff line number Diff line change
Expand Up @@ -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, 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**

Expand Down
2 changes: 1 addition & 1 deletion docs/react/reference/QueryErrorResetBoundary.md
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
6 changes: 3 additions & 3 deletions docs/react/reference/useMutation.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const {
onSuccess,
retry,
retryDelay,
throwErrors,
throwOnError,
meta,
})

Expand Down Expand Up @@ -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`)
Expand Down
8 changes: 4 additions & 4 deletions docs/react/reference/useQuery.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const {
staleTime,
structuralSharing,
suspense,
throwErrors,
throwOnError,
})
```

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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`)
Expand Down
2 changes: 1 addition & 1 deletion docs/solid/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
4 changes: 2 additions & 2 deletions packages/query-core/src/queryClient.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<
Expand Down
16 changes: 9 additions & 7 deletions packages/query-core/src/queryObserver.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -593,7 +595,7 @@ export class QueryObserver<

const includedProps = new Set(notifyOnChangeProps ?? this.#trackedProps)

if (this.options.throwErrors) {
if (this.options.throwOnError) {
includedProps.add('error')
}

Expand Down
12 changes: 6 additions & 6 deletions packages/query-core/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export interface InfiniteQueryPageParamsOptions<
getNextPageParam: GetNextPageParamFunction<TPageParam, TQueryFnData>
}

export type ThrowErrors<
export type ThrowOnError<
TQueryFnData,
TError,
TQueryData,
Expand Down Expand Up @@ -202,7 +202,7 @@ export interface QueryObserverOptions<
| ((
data: TData | undefined,
query: Query<TQueryFnData, TError, TQueryData, TQueryKey>,
) => 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`.
Expand Down Expand Up @@ -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<TQueryFnData, TError, TQueryData, TQueryKey>
throwOnError?: ThrowOnError<TQueryFnData, TError, TQueryData, TQueryKey>
/**
* This option can be used to transform or select a part of the data returned by the query function.
*/
Expand Down Expand Up @@ -297,7 +297,7 @@ export type DefaultedQueryObserverOptions<
TQueryKey extends QueryKey = QueryKey,
> = WithRequired<
QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
'throwErrors' | 'refetchOnReconnect'
'throwOnError' | 'refetchOnReconnect'
>

export interface InfiniteQueryObserverOptions<
Expand Down Expand Up @@ -333,7 +333,7 @@ export type DefaultedInfiniteQueryObserverOptions<
TQueryKey,
TPageParam
>,
'throwErrors' | 'refetchOnReconnect'
'throwOnError' | 'refetchOnReconnect'
>

export interface FetchQueryOptions<
Expand Down Expand Up @@ -636,7 +636,7 @@ export interface MutationObserverOptions<
TVariables = void,
TContext = unknown,
> extends MutationOptions<TData, TError, TVariables, TContext> {
throwErrors?: boolean | ((error: TError) => boolean)
throwOnError?: boolean | ((error: TError) => boolean)
}

export interface MutateOptions<
Expand Down
22 changes: 11 additions & 11 deletions packages/react-query/src/__tests__/QueryResetErrorBoundary.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ describe('QueryErrorResetBoundary', () => {
}
},
retry: false,
throwErrors: true,
throwOnError: true,
})
return <div>{data}</div>
}
Expand Down Expand Up @@ -97,7 +97,7 @@ describe('QueryErrorResetBoundary', () => {
},
retry: false,
enabled: !succeed,
throwErrors: true,
throwOnError: true,
})
return (
<div>
Expand Down Expand Up @@ -163,7 +163,7 @@ describe('QueryErrorResetBoundary', () => {
},
retry: false,
enabled,
throwErrors: true,
throwOnError: true,
})

React.useEffect(() => {
Expand Down Expand Up @@ -221,7 +221,7 @@ describe('QueryErrorResetBoundary', () => {
},
retry: false,
enabled: false,
throwErrors: true,
throwOnError: true,
})

return (
Expand Down Expand Up @@ -289,7 +289,7 @@ describe('QueryErrorResetBoundary', () => {
}
},
retry: false,
throwErrors: true,
throwOnError: true,
})
return <div>{data}</div>
}
Expand Down Expand Up @@ -347,7 +347,7 @@ describe('QueryErrorResetBoundary', () => {
}
},
retry: false,
throwErrors: true,
throwOnError: true,
initialData: 'initial',
})
return <div>{data}</div>
Expand Down Expand Up @@ -408,7 +408,7 @@ describe('QueryErrorResetBoundary', () => {
}
},
retry: false,
throwErrors: true,
throwOnError: true,
})
return <div>{data}</div>
}
Expand Down Expand Up @@ -471,7 +471,7 @@ describe('QueryErrorResetBoundary', () => {
throw new Error('Error')
},
retry: false,
throwErrors: true,
throwOnError: true,
})
return <div>{data}</div>
}
Expand Down Expand Up @@ -624,7 +624,7 @@ describe('QueryErrorResetBoundary', () => {
}
},
retry: false,
throwErrors: true,
throwOnError: true,
})
return <div>{data}</div>
}
Expand Down Expand Up @@ -685,7 +685,7 @@ describe('QueryErrorResetBoundary', () => {
}
},
retry: false,
throwErrors: true,
throwOnError: true,
retryOnMount: true,
},
],
Expand Down Expand Up @@ -748,7 +748,7 @@ describe('QueryErrorResetBoundary', () => {
}
},
retry: false,
throwErrors: true,
throwOnError: true,
retryOnMount: true,
suspense: true,
},
Expand Down
12 changes: 6 additions & 6 deletions packages/react-query/src/__tests__/suspense.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -546,7 +546,7 @@ describe("useQuery's in Suspense mode", () => {
},
retry: false,
suspense: true,
throwErrors: false,
throwOnError: false,
})
return <div>rendered</div>
}
Expand All @@ -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)
Expand All @@ -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 <div>rendered</div>
}
Expand Down Expand Up @@ -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() {
Expand All @@ -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 <div>rendered</div>
}
Expand Down
8 changes: 4 additions & 4 deletions packages/react-query/src/__tests__/useMutation.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -699,7 +699,7 @@ describe('useMutation', () => {
err.stack = ''
return Promise.reject(err)
},
throwErrors: true,
throwOnError: true,
})

return (
Expand Down Expand Up @@ -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)
Expand All @@ -747,7 +747,7 @@ describe('useMutation', () => {
err.stack = ''
return Promise.reject(err)
},
throwErrors: () => {
throwOnError: () => {
boundary = !boundary
return !boundary
},
Expand Down
Loading