Skip to content

Commit 843df36

Browse files
committed
docs: update api docs
1 parent c7e342a commit 843df36

File tree

1 file changed

+58
-6
lines changed

1 file changed

+58
-6
lines changed

docs/src/pages/docs/api.md

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,11 @@ const queryInfo = useQuery({
5959
6060
**Options**
6161
62-
- `queryKey: String | [String, ...any] | falsy`
62+
- `queryKey: String | any[]`
6363
- **Required**
6464
- The query key to use for this query.
6565
- If a string is passed, it will be used as the query key.
66-
- If a `[String, ...any]` array is passed, each item will be serialized into a stable query key. See [Query Keys](./guides/queries#query-keys) for more information.
66+
- If an array is passed, each item will be serialized into a stable query key. See [Query Keys](./guides/queries#query-keys) for more information.
6767
- The query will automatically update when this key changes (as long as `enabled` is not set to `false`).
6868
- `queryFn: Function(variables) => Promise(data/error)`
6969
- **Required, but only if no default query function has been defined**
@@ -183,9 +183,8 @@ const queryInfo = useQuery({
183183
- The failure count for the query.
184184
- Incremented every time the query fails.
185185
- Reset to `0` when the query succeeds.
186-
- `refetch: Function({ force, throwOnError }) => void`
187-
- A function to manually refetch the query if it is stale.
188-
- To bypass the stale check, you can pass the `force: true` option and refetch it regardless of it's freshness
186+
- `refetch: Function({ throwOnError }) => Promise<TResult | undefined>`
187+
- A function to manually refetch the query.
189188
- If the query errors, the error will only be logged. If you want an error to be thrown, pass the `throwOnError: true` option
190189
- `clear: Function() => void`
191190
- A function to remove the query from the cache.
@@ -251,7 +250,7 @@ The returned properties for `useInfiniteQuery` are identical to the [`useQuery`
251250
252251
- `isFetchingMore: false | 'next' | 'previous'`
253252
- If using `paginated` mode, this will be `true` when fetching more results using the `fetchMore` function.
254-
- `fetchMore: Function(fetchMoreVariableOverride) => Promise`
253+
- `fetchMore: Function(fetchMoreVariableOverride) => Promise<TResult | undefined>`
255254
- This function allows you to fetch the next "page" of results.
256255
- `fetchMoreVariableOverride` allows you to optionally override the fetch more variable returned from your `getFetchMore` option to your query function to retrieve the next page of results.
257256
- `canFetchMore: Boolean`
@@ -787,6 +786,59 @@ function App() {
787786
- In instance of queryCache, you can use the `makeQueryCache` factory to create this.
788787
- If not provided, a new cache will be generated.
789788
789+
## `ReactQueryErrorResetBoundary`
790+
791+
When using **suspense** or **useErrorBoundaries** in your queries, you need a way to let queries know that you want to try again when re-rendering after some error occured. With the `ReactQueryErrorResetBoundary` component you can reset any query errors within the boundaries of the component.
792+
793+
```js
794+
import { ReactQueryErrorResetBoundary } from 'react-query'
795+
import { ErrorBoundary } from 'react-error-boundary'
796+
797+
const App: React.FC = () => (
798+
<ReactQueryErrorResetBoundary>
799+
{({ reset }) => (
800+
<ErrorBoundary
801+
onReset={reset}
802+
fallbackRender={({ resetErrorBoundary }) => (
803+
<div>
804+
There was an error!
805+
<Button onClick={() => resetErrorBoundary()}>Try again</Button>
806+
</div>
807+
)}
808+
>
809+
<Page />
810+
</ErrorBoundary>
811+
)}
812+
</ReactQueryErrorResetBoundary>
813+
)
814+
```
815+
816+
## `useErrorResetBoundary`
817+
818+
This hook will reset any query errors within the closest `ReactQueryErrorResetBoundary`. If there is no boundary defined it will reset them globally:
819+
820+
```js
821+
import { useErrorResetBoundary } from 'react-query'
822+
import { ErrorBoundary } from 'react-error-boundary'
823+
824+
const App: React.FC = () => {
825+
const { reset } = useErrorResetBoundary()
826+
return (
827+
<ErrorBoundary
828+
onReset={reset}
829+
fallbackRender={({ resetErrorBoundary }) => (
830+
<div>
831+
There was an error!
832+
<Button onClick={() => resetErrorBoundary()}>Try again</Button>
833+
</div>
834+
)}
835+
>
836+
<Page />
837+
</ErrorBoundary>
838+
)
839+
}
840+
```
841+
790842
## `setConsole`
791843
792844
`setConsole` is an optional utility function that allows you to replace the `console` interface used to log errors. By default, the `window.console` object is used. If no global `console` object is found in the environment, nothing will be logged.

0 commit comments

Comments
 (0)