Skip to content
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
264 changes: 224 additions & 40 deletions docs/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -1013,84 +1013,268 @@
"label": "react",
"children": [
{
"label": "useQuery",
"to": "framework/react/reference/useQuery"
"label": "React Reference",
"to": "framework/react/reference/index"
},
{
"label": "useQueries",
"to": "framework/react/reference/useQueries"
"label": "Functions / useQuery",
"to": "framework/react/reference/functions/useQuery"
},
{
"label": "useInfiniteQuery",
"to": "framework/react/reference/useInfiniteQuery"
"label": "Functions / useQueries",
"to": "framework/react/reference/functions/useQueries"
},
{
"label": "useMutation",
"to": "framework/react/reference/useMutation"
"label": "Functions / useInfiniteQuery",
"to": "framework/react/reference/functions/useInfiniteQuery"
},
{
"label": "useIsFetching",
"to": "framework/react/reference/useIsFetching"
"label": "Functions / useMutation",
"to": "framework/react/reference/functions/useMutation"
},
{
"label": "useIsMutating",
"to": "framework/react/reference/useIsMutating"
"label": "Functions / useIsFetching",
"to": "framework/react/reference/functions/useIsFetching"
},
{
"label": "useMutationState",
"to": "framework/react/reference/useMutationState"
"label": "Functions / useIsMutating",
"to": "framework/react/reference/functions/useIsMutating"
},
{
"label": "useSuspenseQuery",
"to": "framework/react/reference/useSuspenseQuery"
"label": "Functions / useMutationState",
"to": "framework/react/reference/functions/useMutationState"
},
{
"label": "useSuspenseInfiniteQuery",
"to": "framework/react/reference/useSuspenseInfiniteQuery"
"label": "Functions / useSuspenseQuery",
"to": "framework/react/reference/functions/useSuspenseQuery"
},
{
"label": "useSuspenseQueries",
"to": "framework/react/reference/useSuspenseQueries"
"label": "Functions / useSuspenseInfiniteQuery",
"to": "framework/react/reference/functions/useSuspenseInfiniteQuery"
},
{
"label": "QueryClientProvider",
"to": "framework/react/reference/QueryClientProvider"
"label": "Functions / useSuspenseQueries",
"to": "framework/react/reference/functions/useSuspenseQueries"
},
{
"label": "useQueryClient",
"to": "framework/react/reference/useQueryClient"
"label": "Functions / QueryClientProvider",
"to": "framework/react/reference/functions/QueryClientProvider"
},
{
"label": "queryOptions",
"to": "framework/react/reference/queryOptions"
"label": "Functions / useQueryClient",
"to": "framework/react/reference/functions/useQueryClient"
},
{
"label": "infiniteQueryOptions",
"to": "framework/react/reference/infiniteQueryOptions"
"label": "Functions / queryOptions",
"to": "framework/react/reference/functions/queryOptions"
},
{
"label": "mutationOptions",
"to": "framework/react/reference/mutationOptions"
"label": "Functions / infiniteQueryOptions",
"to": "framework/react/reference/functions/infiniteQueryOptions"
},
{
"label": "usePrefetchQuery",
"to": "framework/react/reference/usePrefetchQuery"
"label": "Functions / mutationOptions",
"to": "framework/react/reference/functions/mutationOptions"
},
{
"label": "usePrefetchInfiniteQuery",
"to": "framework/react/reference/usePrefetchInfiniteQuery"
"label": "Functions / usePrefetchQuery",
"to": "framework/react/reference/functions/usePrefetchQuery"
},
{
"label": "QueryErrorResetBoundary",
"to": "framework/react/reference/QueryErrorResetBoundary"
"label": "Functions / usePrefetchInfiniteQuery",
"to": "framework/react/reference/functions/usePrefetchInfiniteQuery"
},
{
"label": "useQueryErrorResetBoundary",
"to": "framework/react/reference/useQueryErrorResetBoundary"
"label": "Functions / QueryErrorResetBoundary",
"to": "framework/react/reference/functions/QueryErrorResetBoundary"
},
{
"label": "hydration",
"to": "framework/react/reference/hydration"
"label": "Functions / useQueryErrorResetBoundary",
"to": "framework/react/reference/functions/useQueryErrorResetBoundary"
},
{
"label": "Functions / HydrationBoundary",
"to": "framework/react/reference/functions/HydrationBoundary"
},
{
"label": "Functions / useIsRestoring",
"to": "framework/react/reference/functions/useIsRestoring"
},
{
"label": "Interfaces / HydrationBoundaryProps",
"to": "framework/react/reference/interfaces/HydrationBoundaryProps"
},
{
"label": "Interfaces / QueryErrorResetBoundaryProps",
"to": "framework/react/reference/interfaces/QueryErrorResetBoundaryProps"
},
{
"label": "Interfaces / UseBaseQueryOptions",
"to": "framework/react/reference/interfaces/UseBaseQueryOptions"
},
{
"label": "Interfaces / UseInfiniteQueryOptions",
"to": "framework/react/reference/interfaces/UseInfiniteQueryOptions"
},
{
"label": "Interfaces / UseMutationOptions",
"to": "framework/react/reference/interfaces/UseMutationOptions"
},
{
"label": "Interfaces / UseQueryOptions",
"to": "framework/react/reference/interfaces/UseQueryOptions"
},
{
"label": "Interfaces / UseSuspenseInfiniteQueryOptions",
"to": "framework/react/reference/interfaces/UseSuspenseInfiniteQueryOptions"
},
{
"label": "Interfaces / UseSuspenseQueryOptions",
"to": "framework/react/reference/interfaces/UseSuspenseQueryOptions"
},
{
"label": "Types / AnyUseBaseQueryOptions",
"to": "framework/react/reference/type-aliases/AnyUseBaseQueryOptions"
},
{
"label": "Types / AnyUseInfiniteQueryOptions",
"to": "framework/react/reference/type-aliases/AnyUseInfiniteQueryOptions"
},
{
"label": "Types / AnyUseMutationOptions",
"to": "framework/react/reference/type-aliases/AnyUseMutationOptions"
},
{
"label": "Types / AnyUseQueryOptions",
"to": "framework/react/reference/type-aliases/AnyUseQueryOptions"
},
{
"label": "Types / AnyUseSuspenseInfiniteQueryOptions",
"to": "framework/react/reference/type-aliases/AnyUseSuspenseInfiniteQueryOptions"
},
{
"label": "Types / AnyUseSuspenseQueryOptions",
"to": "framework/react/reference/type-aliases/AnyUseSuspenseQueryOptions"
},
{
"label": "Types / DefinedInitialDataInfiniteOptions",
"to": "framework/react/reference/type-aliases/DefinedInitialDataInfiniteOptions"
},
{
"label": "Types / DefinedInitialDataOptions",
"to": "framework/react/reference/type-aliases/DefinedInitialDataOptions"
},
{
"label": "Types / DefinedUseInfiniteQueryResult",
"to": "framework/react/reference/type-aliases/DefinedUseInfiniteQueryResult"
},
{
"label": "Types / DefinedUseQueryResult",
"to": "framework/react/reference/type-aliases/DefinedUseQueryResult"
},
{
"label": "Types / QueriesOptions",
"to": "framework/react/reference/type-aliases/QueriesOptions"
},
{
"label": "Types / QueriesResults",
"to": "framework/react/reference/type-aliases/QueriesResults"
},
{
"label": "Types / QueryClientProviderProps",
"to": "framework/react/reference/type-aliases/QueryClientProviderProps"
},
{
"label": "Types / QueryErrorClearResetFunction",
"to": "framework/react/reference/type-aliases/QueryErrorClearResetFunction"
},
{
"label": "Types / QueryErrorIsResetFunction",
"to": "framework/react/reference/type-aliases/QueryErrorIsResetFunction"
},
{
"label": "Types / QueryErrorResetBoundaryFunction",
"to": "framework/react/reference/type-aliases/QueryErrorResetBoundaryFunction"
},
{
"label": "Types / QueryErrorResetFunction",
"to": "framework/react/reference/type-aliases/QueryErrorResetFunction"
},
{
"label": "Types / SuspenseQueriesOptions",
"to": "framework/react/reference/type-aliases/SuspenseQueriesOptions"
},
{
"label": "Types / SuspenseQueriesResults",
"to": "framework/react/reference/type-aliases/SuspenseQueriesResults"
},
{
"label": "Types / UndefinedInitialDataInfiniteOptions",
"to": "framework/react/reference/type-aliases/UndefinedInitialDataInfiniteOptions"
},
{
"label": "Types / UndefinedInitialDataOptions",
"to": "framework/react/reference/type-aliases/UndefinedInitialDataOptions"
},
{
"label": "Types / UnusedSkipTokenInfiniteOptions",
"to": "framework/react/reference/type-aliases/UnusedSkipTokenInfiniteOptions"
},
{
"label": "Types / UnusedSkipTokenOptions",
"to": "framework/react/reference/type-aliases/UnusedSkipTokenOptions"
},
{
"label": "Types / UseBaseMutationResult",
"to": "framework/react/reference/type-aliases/UseBaseMutationResult"
},
{
"label": "Types / UseBaseQueryResult",
"to": "framework/react/reference/type-aliases/UseBaseQueryResult"
},
{
"label": "Types / UseInfiniteQueryResult",
"to": "framework/react/reference/type-aliases/UseInfiniteQueryResult"
},
{
"label": "Types / UseMutateAsyncFunction",
"to": "framework/react/reference/type-aliases/UseMutateAsyncFunction"
},
{
"label": "Types / UseMutateFunction",
"to": "framework/react/reference/type-aliases/UseMutateFunction"
},
{
"label": "Types / UseMutationResult",
"to": "framework/react/reference/type-aliases/UseMutationResult"
},
{
"label": "Types / UsePrefetchInfiniteQueryOptions",
"to": "framework/react/reference/type-aliases/UsePrefetchInfiniteQueryOptions"
},
{
"label": "Types / UsePrefetchQueryOptions",
"to": "framework/react/reference/type-aliases/UsePrefetchQueryOptions"
},
{
"label": "Types / UseQueryResult",
"to": "framework/react/reference/type-aliases/UseQueryResult"
},
{
"label": "Types / UseSuspenseInfiniteQueryResult",
"to": "framework/react/reference/type-aliases/UseSuspenseInfiniteQueryResult"
},
{
"label": "Types / UseSuspenseQueryResult",
"to": "framework/react/reference/type-aliases/UseSuspenseQueryResult"
},
{
"label": "Variables / IsRestoringProvider",
"to": "framework/react/reference/variables/IsRestoringProvider"
},
{
"label": "Variables / QueryClientContext",
"to": "framework/react/reference/variables/QueryClientContext"
}
]
},
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/react/guides/caching.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Let's assume we are using the default `gcTime` of **5 minutes** and the default
- A second instance of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` mounts elsewhere.
- Since the cache already has data for the `['todos']` key from the first query, that data is immediately returned from the cache.
- The new instance triggers a new network request using its query function.
- Note that regardless of whether both `fetchTodos` query functions are identical or not, both queries' [`status`](../reference/useQuery.md) are updated (including `isFetching`, `isPending`, and other related values) because they have the same query key.
- Note that regardless of whether both `fetchTodos` query functions are identical or not, both queries' [`status`](../reference/functions/useQuery.md) are updated (including `isFetching`, `isPending`, and other related values) because they have the same query key.
- When the request completes successfully, the cache's data under the `['todos']` key is updated with the new data, and both instances are updated with the new data.
- Both instances of the `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` query are unmounted and no longer in use.
- Since there are no more active instances of this query, a garbage collection timeout is set using `gcTime` to delete and garbage collect the query (defaults to **5 minutes**).
Expand Down
4 changes: 2 additions & 2 deletions docs/framework/react/guides/migrating-to-react-query-3.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,8 @@ try {

Together, these provide the same experience as before, but with added control to choose which component trees you want to reset. For more information, see:

- [QueryErrorResetBoundary](../reference/QueryErrorResetBoundary.md)
- [useQueryErrorResetBoundary](../reference/useQueryErrorResetBoundary.md)
- [QueryErrorResetBoundary](../reference/functions/QueryErrorResetBoundary.md)
- [useQueryErrorResetBoundary](../reference/functions/useQueryErrorResetBoundary.md)

### `QueryCache.getQuery()` has been replaced by `QueryCache.find()`.

Expand Down
2 changes: 1 addition & 1 deletion docs/framework/react/guides/migrating-to-v5.md
Original file line number Diff line number Diff line change
Expand Up @@ -521,7 +521,7 @@ Infinite Queries can be prefetched like regular Queries. Per default, only the f

### New `combine` option for `useQueries`

See the [useQueries docs](../reference/useQueries.md#combine) for more details.
See the [useQueries docs](../reference/functions/useQueries.md#combine) for more details.

### Experimental `fine grained storage persister`

Expand Down
2 changes: 1 addition & 1 deletion docs/framework/react/guides/parallel-queries.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,6 @@ function App({ users }) {
[//]: # 'Example2'
[//]: # 'TypeScriptSelect'

> When using TypeScript, an inline `select` written on a query object passed to `useQueries` can't infer its `data` argument from that same object's `queryFn` β€” it falls back to `unknown`. Annotate the `select` parameter explicitly, or define the query with the [`queryOptions`](../reference/queryOptions.md) helper, to keep type inference. See [this known limitation](https://github.com/TanStack/query/issues/6556).
> When using TypeScript, an inline `select` written on a query object passed to `useQueries` can't infer its `data` argument from that same object's `queryFn` β€” it falls back to `unknown`. Annotate the `select` parameter explicitly, or define the query with the [`queryOptions`](../reference/functions/queryOptions.md) helper, to keep type inference. See [this known limitation](https://github.com/TanStack/query/issues/6556).

[//]: # 'TypeScriptSelect'
2 changes: 1 addition & 1 deletion docs/framework/react/guides/prefetching.md
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ This starts fetching `'article-comments'` immediately and flattens the waterfall

[//]: # 'Suspense'

If you want to prefetch together with Suspense, you will have to do things a bit differently. You can't use `useSuspenseQueries` to prefetch, since the prefetch would block the component from rendering. You also can not use `useQuery` for the prefetch, because that wouldn't start the prefetch until after suspenseful query had resolved. For this scenario, you can use the [`usePrefetchQuery`](../reference/usePrefetchQuery.md) or the [`usePrefetchInfiniteQuery`](../reference/usePrefetchInfiniteQuery.md) hooks available in the library.
If you want to prefetch together with Suspense, you will have to do things a bit differently. You can't use `useSuspenseQueries` to prefetch, since the prefetch would block the component from rendering. You also can not use `useQuery` for the prefetch, because that wouldn't start the prefetch until after suspenseful query had resolved. For this scenario, you can use the [`usePrefetchQuery`](../reference/functions/usePrefetchQuery.md) or the [`usePrefetchInfiniteQuery`](../reference/functions/usePrefetchInfiniteQuery.md) hooks available in the library.

You can now use `useSuspenseQuery` in the component that actually needs the data. You _might_ want to wrap this later component in its own `<Suspense>` boundary so the "secondary" query we are prefetching does not block rendering of the "primary" data.

Expand Down
2 changes: 1 addition & 1 deletion docs/framework/react/guides/query-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ queryClient.setQueryData(groupOptions(42).queryKey, newGroups)

[//]: # 'Example1'

For Infinite Queries, a separate [`infiniteQueryOptions`](../reference/infiniteQueryOptions.md) helper is available.
For Infinite Queries, a separate [`infiniteQueryOptions`](../reference/functions/infiniteQueryOptions.md) helper is available.

[//]: # 'SelectDescription'

Expand Down
2 changes: 1 addition & 1 deletion docs/framework/react/guides/ssr.md
Original file line number Diff line number Diff line change
Expand Up @@ -552,7 +552,7 @@ In case you are creating the `QueryClient` for every request, React Query create

On the server, `gcTime` defaults to `Infinity` which disables manual garbage collection and will automatically clear memory once a request has finished. If you are explicitly setting a non-Infinity `gcTime` then you will be responsible for clearing the cache early.

Avoid setting `gcTime` to `0` as it may result in a hydration error. This occurs because the [Hydration Boundary](../reference/hydration.md#hydrationboundary) places necessary data into the cache for rendering, but if the garbage collector removes the data before the rendering completes, issues may arise. If you require a shorter `gcTime`, we recommend setting it to `2 * 1000` to allow sufficient time for the app to reference the data.
Avoid setting `gcTime` to `0` as it may result in a hydration error. This occurs because the [Hydration Boundary](../reference/functions/HydrationBoundary.md) places necessary data into the cache for rendering, but if the garbage collector removes the data before the rendering completes, issues may arise. If you require a shorter `gcTime`, we recommend setting it to `2 * 1000` to allow sufficient time for the app to reference the data.

To clear the cache after it is not needed and to lower memory consumption, you can add a call to [`queryClient.clear()`](../../../reference/QueryClient.md#queryclientclear) after the request is handled and dehydrated state has been sent to the client.

Expand Down
Loading
Loading