From cc524d6b4e93730578e8e47e308a05e22d25fd36 Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Fri, 5 Dec 2025 18:00:55 +1100 Subject: [PATCH 1/4] docs: correct local relative links --- docs/framework/react/guides/prefetching.md | 2 +- docs/framework/solid/guides/prefetching.md | 2 +- scripts/verify-links.ts | 85 +++++++++++----------- 3 files changed, 46 insertions(+), 43 deletions(-) diff --git a/docs/framework/react/guides/prefetching.md b/docs/framework/react/guides/prefetching.md index 197a3a57de..80c76c978e 100644 --- a/docs/framework/react/guides/prefetching.md +++ b/docs/framework/react/guides/prefetching.md @@ -369,7 +369,7 @@ Because data fetching in the component tree itself can easily lead to request wa In this approach, you explicitly declare for each _route_ what data is going to be needed for that component tree, ahead of time. Because Server Rendering has traditionally needed all data to be loaded before rendering starts, this has been the dominating approach for SSR'd apps for a long time. This is still a common approach and you can read more about it in the [Server Rendering & Hydration guide](../ssr.md). -For now, let's focus on the client side case and look at an example of how you can make this work with [Tanstack Router](https://tanstack.com/router). These examples leave out a lot of setup and boilerplate to stay concise, you can check out a [full React Query example](https://tanstack.com/router/.latest/docs/framework/react/examples/basic-react-query-file-based) over in the [Tanstack Router docs](https://tanstack.com/router/latest/docs). +For now, let's focus on the client side case and look at an example of how you can make this work with [Tanstack Router](https://tanstack.com/router). These examples leave out a lot of setup and boilerplate to stay concise, you can check out a [full React Query example](../examples/basic-react-query-file-based) over in the [Tanstack Router docs](https://tanstack.com/router/latest/docs). When integrating at the router level, you can choose to either _block_ rendering of that route until all data is present, or you can start a prefetch but not await the result. That way, you can start rendering the route as soon as possible. You can also mix these two approaches and await some critical data, but start rendering before all the secondary data has finished loading. In this example, we'll configure an `/article` route to not render until the article data has finished loading, as well as start prefetching comments as soon as possible, but not block rendering the route if comments haven't finished loading yet. diff --git a/docs/framework/solid/guides/prefetching.md b/docs/framework/solid/guides/prefetching.md index 9352d1a24f..deef90c61c 100644 --- a/docs/framework/solid/guides/prefetching.md +++ b/docs/framework/solid/guides/prefetching.md @@ -11,6 +11,6 @@ replace: 'useQuery[(]': 'useQuery(() => ', 'useQueries[(]': 'useQueries(() => ', 'useInfiniteQuery[(]': 'useInfiniteQuery(() => ', - '/docs/framework/react/examples/basic-react-query-file-based': '/docs/framework/solid/examples/basic-solid-query-file-based', + '../examples/basic-react-query-file-based': '../examples/basic-solid-query-file-based', } --- diff --git a/scripts/verify-links.ts b/scripts/verify-links.ts index 268a0ac90a..3d768cfad6 100644 --- a/scripts/verify-links.ts +++ b/scripts/verify-links.ts @@ -1,12 +1,19 @@ import { existsSync, readFileSync, statSync } from 'node:fs' -import path, { resolve } from 'node:path' +import { extname, resolve } from 'node:path' import { glob } from 'tinyglobby' // @ts-ignore Could not find a declaration file for module 'markdown-link-extractor'. import markdownLinkExtractor from 'markdown-link-extractor' +const errors: Array<{ + file: string + link: string + resolvedPath: string + reason: string +}> = [] + function isRelativeLink(link: string) { return ( - link && + !link.startsWith(`/`) && !link.startsWith('http://') && !link.startsWith('https://') && !link.startsWith('//') && @@ -15,39 +22,33 @@ function isRelativeLink(link: string) { ) } -function normalizePath(p: string): string { - // Remove any trailing .md - p = p.replace(`${path.extname(p)}`, '') - return p +/** Remove any trailing .md */ +function stripExtension(p: string): string { + return p.replace(`${extname(p)}`, '') } -function fileExistsForLink( - link: string, - markdownFile: string, - errors: Array, -): boolean { +function relativeLinkExists(link: string, file: string): boolean { // Remove hash if present - const filePart = link.split('#')[0] + const linkWithoutHash = link.split('#')[0] // If the link is empty after removing hash, it's not a file - if (!filePart) return false - - // Normalize the markdown file path - markdownFile = normalizePath(markdownFile) + if (!linkWithoutHash) return false - // Normalize the path - const normalizedPath = normalizePath(filePart) + // Strip the file/link extensions + const filePath = stripExtension(file) + const linkPath = stripExtension(linkWithoutHash) // Resolve the path relative to the markdown file's directory - let absPath = resolve(markdownFile, normalizedPath) + // Nav up a level to simulate how links are resolved on the web + let absPath = resolve(filePath, '..', linkPath) // Ensure the resolved path is within /docs const docsRoot = resolve('docs') if (!absPath.startsWith(docsRoot)) { errors.push({ link, - markdownFile, + file, resolvedPath: absPath, - reason: 'navigates above /docs, invalid', + reason: 'Path outside /docs', }) return false } @@ -76,15 +77,15 @@ function fileExistsForLink( if (!exists) { errors.push({ link, - markdownFile, + file, resolvedPath: absPath, - reason: 'not found', + reason: 'Not found', }) } return exists } -async function findMarkdownLinks() { +async function verifyMarkdownLinks() { // Find all markdown files in docs directory const markdownFiles = await glob('docs/**/*.md', { ignore: ['**/node_modules/**'], @@ -92,26 +93,28 @@ async function findMarkdownLinks() { console.log(`Found ${markdownFiles.length} markdown files\n`) - const errors: Array = [] - // Process each file for (const file of markdownFiles) { const content = readFileSync(file, 'utf-8') - const links: Array = markdownLinkExtractor(content) - - const filteredLinks = links.filter((link: any) => { - if (typeof link === 'string') { - return isRelativeLink(link) - } else if (link && typeof link.href === 'string') { - return isRelativeLink(link.href) - } - return false + const links: Array = markdownLinkExtractor(content) + + const relativeLinks = links.filter((link: string) => { + return isRelativeLink(link) }) - if (filteredLinks.length > 0) { - filteredLinks.forEach((link) => { - const href = typeof link === 'string' ? link : link.href - fileExistsForLink(href, file, errors) + if (relativeLinks.length > 0) { + relativeLinks.forEach((link) => { + if (!link.startsWith('.')) { + errors.push({ + link, + file, + resolvedPath: '', + reason: 'Does not start with ./ or ../', + }) + return + } + + relativeLinkExists(link, file) }) } } @@ -120,7 +123,7 @@ async function findMarkdownLinks() { console.log(`\n❌ Found ${errors.length} broken links:`) errors.forEach((err) => { console.log( - `${err.link}\n in: ${err.markdownFile}\n path: ${err.resolvedPath}\n why: ${err.reason}\n`, + `${err.file}\n link: ${err.link}\n resolved: ${err.resolvedPath}\n why: ${err.reason}\n`, ) }) process.exit(1) @@ -129,4 +132,4 @@ async function findMarkdownLinks() { } } -findMarkdownLinks().catch(console.error) +verifyMarkdownLinks().catch(console.error) From a024b9f394c91c7885bb000f5f4d8ce5125c5ffe Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Fri, 5 Dec 2025 18:29:13 +1100 Subject: [PATCH 2/4] Update links --- docs/eslint/eslint-plugin-query.md | 14 +-- docs/framework/angular/guides/caching.md | 6 +- .../guides/invalidations-from-mutations.md | 2 +- .../angular/guides/mutation-options.md | 2 +- docs/framework/angular/installation.md | 2 +- docs/framework/angular/overview.md | 2 +- docs/framework/angular/quick-start.md | 2 +- .../functions/infiniteQueryOptions.md | 12 +-- .../functions/injectInfiniteQuery.md | 18 ++-- .../reference/functions/injectIsFetching.md | 2 +- .../reference/functions/injectIsMutating.md | 2 +- .../reference/functions/injectIsRestoring.md | 2 +- .../reference/functions/injectMutation.md | 6 +- .../functions/injectMutationState.md | 2 +- .../reference/functions/injectQuery.md | 18 ++-- .../reference/functions/mutationOptions.md | 8 +- .../reference/functions/provideQueryClient.md | 2 +- .../functions/provideTanStackQuery.md | 2 +- .../reference/functions/queryFeature.md | 2 +- .../reference/functions/queryOptions.md | 12 +-- docs/framework/angular/reference/index.md | 98 +++++++++---------- .../interfaces/BaseQueryNarrowing.md | 6 +- .../interfaces/CreateQueryOptions.md | 2 +- .../type-aliases/CreateMutationResult.md | 2 +- .../reference/type-aliases/QueryFeatures.md | 2 +- docs/framework/react/guides/advanced-ssr.md | 10 +- docs/framework/react/guides/caching.md | 4 +- .../react/guides/dependent-queries.md | 2 +- .../react/guides/important-defaults.md | 8 +- .../react/guides/initial-query-data.md | 4 +- .../guides/invalidations-from-mutations.md | 2 +- .../guides/migrating-to-react-query-3.md | 4 +- .../guides/migrating-to-react-query-4.md | 28 +++--- .../framework/react/guides/migrating-to-v5.md | 16 +-- docs/framework/react/guides/mutations.md | 8 +- docs/framework/react/guides/network-mode.md | 8 +- .../react/guides/placeholder-query-data.md | 4 +- docs/framework/react/guides/prefetching.md | 18 ++-- docs/framework/react/guides/queries.md | 4 +- .../framework/react/guides/query-functions.md | 8 +- .../react/guides/query-invalidation.md | 2 +- docs/framework/react/guides/query-keys.md | 4 +- docs/framework/react/guides/query-options.md | 6 +- .../react/guides/render-optimizations.md | 2 +- .../react/guides/request-waterfalls.md | 22 ++--- docs/framework/react/guides/ssr.md | 18 ++-- docs/framework/react/guides/suspense.md | 12 +-- .../guides/updates-from-mutation-responses.md | 2 +- docs/framework/react/installation.md | 4 +- docs/framework/react/overview.md | 2 +- .../plugins/createAsyncStoragePersister.md | 4 +- .../plugins/createSyncStoragePersister.md | 4 +- .../react/plugins/persistQueryClient.md | 16 +-- docs/framework/react/quick-start.md | 8 +- .../react/reference/infiniteQueryOptions.md | 4 +- .../react/reference/mutationOptions.md | 2 +- .../framework/react/reference/queryOptions.md | 2 +- .../react/reference/useInfiniteQuery.md | 8 +- .../react/reference/useIsFetching.md | 2 +- .../react/reference/useIsMutating.md | 2 +- docs/framework/react/reference/useMutation.md | 6 +- .../react/reference/useMutationState.md | 2 +- .../reference/usePrefetchInfiniteQuery.md | 6 +- .../react/reference/usePrefetchQuery.md | 6 +- docs/framework/react/reference/useQueries.md | 2 +- docs/framework/react/reference/useQuery.md | 14 +-- .../reference/useSuspenseInfiniteQuery.md | 6 +- .../react/reference/useSuspenseQueries.md | 6 +- .../react/reference/useSuspenseQuery.md | 6 +- docs/framework/react/typescript.md | 4 +- docs/framework/solid/guides/suspense.md | 2 +- docs/framework/solid/installation.md | 2 +- docs/framework/solid/reference/useQuery.md | 14 +-- docs/framework/solid/typescript.md | 4 +- docs/framework/svelte/installation.md | 2 +- docs/framework/svelte/overview.md | 4 +- .../functions/createInfiniteQuery.md | 6 +- .../reference/functions/createMutation.md | 6 +- .../reference/functions/createQueries.md | 4 +- .../svelte/reference/functions/createQuery.md | 18 ++-- .../functions/infiniteQueryOptions.md | 4 +- .../reference/functions/queryOptions.md | 8 +- .../reference/functions/useMutationState.md | 2 +- docs/framework/svelte/reference/index.md | 78 +++++++-------- docs/framework/svelte/ssr.md | 2 +- docs/framework/vue/guides/ssr.md | 2 +- docs/framework/vue/guides/suspense.md | 2 +- docs/framework/vue/installation.md | 2 +- docs/framework/vue/overview.md | 2 +- docs/framework/vue/quick-start.md | 2 +- docs/framework/vue/reactivity.md | 2 +- docs/reference/InfiniteQueryObserver.md | 2 +- docs/reference/QueriesObserver.md | 2 +- docs/reference/QueryCache.md | 6 +- docs/reference/QueryClient.md | 38 +++---- docs/reference/QueryObserver.md | 2 +- docs/reference/streamedQuery.md | 2 +- scripts/generate-docs.ts | 28 ------ 98 files changed, 380 insertions(+), 408 deletions(-) diff --git a/docs/eslint/eslint-plugin-query.md b/docs/eslint/eslint-plugin-query.md index 73750c65d7..8b6ae637de 100644 --- a/docs/eslint/eslint-plugin-query.md +++ b/docs/eslint/eslint-plugin-query.md @@ -93,10 +93,10 @@ Alternatively, add `@tanstack/query` to the plugins section, and configure the r ## Rules -- [@tanstack/query/exhaustive-deps](../exhaustive-deps.md) -- [@tanstack/query/no-rest-destructuring](../no-rest-destructuring.md) -- [@tanstack/query/stable-query-client](../stable-query-client.md) -- [@tanstack/query/no-unstable-deps](../no-unstable-deps.md) -- [@tanstack/query/infinite-query-property-order](../infinite-query-property-order.md) -- [@tanstack/query/no-void-query-fn](../no-void-query-fn.md) -- [@tanstack/query/mutation-property-order](../mutation-property-order.md) +- [@tanstack/query/exhaustive-deps](./exhaustive-deps.md) +- [@tanstack/query/no-rest-destructuring](./no-rest-destructuring.md) +- [@tanstack/query/stable-query-client](./stable-query-client.md) +- [@tanstack/query/no-unstable-deps](./no-unstable-deps.md) +- [@tanstack/query/infinite-query-property-order](./infinite-query-property-order.md) +- [@tanstack/query/no-void-query-fn](./no-void-query-fn.md) +- [@tanstack/query/mutation-property-order](./mutation-property-order.md) diff --git a/docs/framework/angular/guides/caching.md b/docs/framework/angular/guides/caching.md index a871e5f58f..32c6e6d58d 100644 --- a/docs/framework/angular/guides/caching.md +++ b/docs/framework/angular/guides/caching.md @@ -3,7 +3,7 @@ id: caching title: Caching Examples --- -> Please thoroughly read the [Important Defaults](../important-defaults.md) before reading this guide +> Please thoroughly read the [Important Defaults](./important-defaults.md) before reading this guide ## Basic Example @@ -23,7 +23,7 @@ Let's assume we are using the default `gcTime` of **5 minutes** and the default - A second instance of `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos })` initializes 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/functions/injectQuery.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/injectQuery.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 `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos })` query are destroyed 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**). @@ -32,4 +32,4 @@ Let's assume we are using the default `gcTime` of **5 minutes** and the default - No more instances of `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos })` appear within **5 minutes**. - The cached data under the `['todos']` key is deleted and garbage collected. -For more advanced use-cases, see [injectQuery](../../reference/functions/injectQuery.md). +For more advanced use-cases, see [injectQuery](../reference/functions/injectQuery.md). diff --git a/docs/framework/angular/guides/invalidations-from-mutations.md b/docs/framework/angular/guides/invalidations-from-mutations.md index 402463dedc..18f84e9ec3 100644 --- a/docs/framework/angular/guides/invalidations-from-mutations.md +++ b/docs/framework/angular/guides/invalidations-from-mutations.md @@ -38,4 +38,4 @@ export class TodosComponent { [//]: # 'Example2' -You can wire up your invalidations to happen using any of the callbacks available in the [`injectMutation` function](../mutations.md) +You can wire up your invalidations to happen using any of the callbacks available in the [`injectMutation` function](./mutations.md) diff --git a/docs/framework/angular/guides/mutation-options.md b/docs/framework/angular/guides/mutation-options.md index 469a5b7c46..28a8218f20 100644 --- a/docs/framework/angular/guides/mutation-options.md +++ b/docs/framework/angular/guides/mutation-options.md @@ -5,7 +5,7 @@ title: Mutation Options One of the best ways to share mutation options between multiple places, is to use the `mutationOptions` helper. At runtime, this helper just returns whatever you pass into it, -but it has a lot of advantages when using it [with TypeScript](../../typescript#typing-query-options.md). +but it has a lot of advantages when using it [with TypeScript](../typescript#typing-query-options.md). You can define all possible options for a mutation in one place, and you'll also get type inference and type safety for all of them. diff --git a/docs/framework/angular/installation.md b/docs/framework/angular/installation.md index 20667aba90..dffc092e7c 100644 --- a/docs/framework/angular/installation.md +++ b/docs/framework/angular/installation.md @@ -31,4 +31,4 @@ or bun add @tanstack/angular-query-experimental ``` -> Wanna give it a spin before you download? Try out the [simple](../examples/simple) or [basic](../examples/basic) examples! +> Wanna give it a spin before you download? Try out the [simple](./examples/simple) or [basic](./examples/basic) examples! diff --git a/docs/framework/angular/overview.md b/docs/framework/angular/overview.md index 7b735aebf3..be68c08e5a 100644 --- a/docs/framework/angular/overview.md +++ b/docs/framework/angular/overview.md @@ -109,4 +109,4 @@ interface Response { ## You talked me into it, so what now? -- Learn TanStack Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation.md) and [API Reference](../reference/functions/injectQuery.md) +- Learn TanStack Query at your own pace with our amazingly thorough [Walkthrough Guide](./installation.md) and [API Reference](./reference/functions/injectQuery.md) diff --git a/docs/framework/angular/quick-start.md b/docs/framework/angular/quick-start.md index 4d868b59a1..b711f92b2b 100644 --- a/docs/framework/angular/quick-start.md +++ b/docs/framework/angular/quick-start.md @@ -7,7 +7,7 @@ title: Quick Start [//]: # 'Example' -If you're looking for a fully functioning example, please have a look at our [basic codesandbox example](../examples/basic) +If you're looking for a fully functioning example, please have a look at our [basic codesandbox example](./examples/basic) ### Provide the client to your App diff --git a/docs/framework/angular/reference/functions/infiniteQueryOptions.md b/docs/framework/angular/reference/functions/infiniteQueryOptions.md index c5a2275ade..95b72f4206 100644 --- a/docs/framework/angular/reference/functions/infiniteQueryOptions.md +++ b/docs/framework/angular/reference/functions/infiniteQueryOptions.md @@ -51,13 +51,13 @@ The `queryKey` will be tagged with the type from `queryFn`. #### options -[`DefinedInitialDataInfiniteOptions`](../../type-aliases/DefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> +[`DefinedInitialDataInfiniteOptions`](../type-aliases/DefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> The infinite query options to tag with the type from `queryFn`. ### Returns -[`CreateInfiniteQueryOptions`](../../interfaces/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object` & `object` +[`CreateInfiniteQueryOptions`](../interfaces/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object` & `object` The tagged infinite query options. @@ -99,13 +99,13 @@ The `queryKey` will be tagged with the type from `queryFn`. #### options -[`UnusedSkipTokenInfiniteOptions`](../../type-aliases/UnusedSkipTokenInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> +[`UnusedSkipTokenInfiniteOptions`](../type-aliases/UnusedSkipTokenInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> The infinite query options to tag with the type from `queryFn`. ### Returns -`OmitKeyof`\<[`CreateInfiniteQueryOptions`](../../interfaces/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>, `"queryFn"`\> & `object` & `object` +`OmitKeyof`\<[`CreateInfiniteQueryOptions`](../interfaces/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>, `"queryFn"`\> & `object` & `object` The tagged infinite query options. @@ -147,12 +147,12 @@ The `queryKey` will be tagged with the type from `queryFn`. #### options -[`UndefinedInitialDataInfiniteOptions`](../../type-aliases/UndefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> +[`UndefinedInitialDataInfiniteOptions`](../type-aliases/UndefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> The infinite query options to tag with the type from `queryFn`. ### Returns -[`CreateInfiniteQueryOptions`](../../interfaces/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object` & `object` +[`CreateInfiniteQueryOptions`](../interfaces/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & `object` & `object` The tagged infinite query options. diff --git a/docs/framework/angular/reference/functions/injectInfiniteQuery.md b/docs/framework/angular/reference/functions/injectInfiniteQuery.md index fdec50af3a..020ef039fa 100644 --- a/docs/framework/angular/reference/functions/injectInfiniteQuery.md +++ b/docs/framework/angular/reference/functions/injectInfiniteQuery.md @@ -53,19 +53,19 @@ Infinite queries can additively "load more" data onto an existing set of data or #### injectInfiniteQueryFn -() => [`DefinedInitialDataInfiniteOptions`](../../type-aliases/DefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> +() => [`DefinedInitialDataInfiniteOptions`](../type-aliases/DefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> A function that returns infinite query options. #### options? -[`InjectInfiniteQueryOptions`](../../interfaces/InjectInfiniteQueryOptions.md) +[`InjectInfiniteQueryOptions`](../interfaces/InjectInfiniteQueryOptions.md) Additional configuration. ### Returns -[`DefinedCreateInfiniteQueryResult`](../../type-aliases/DefinedCreateInfiniteQueryResult.md)\<`TData`, `TError`\> +[`DefinedCreateInfiniteQueryResult`](../type-aliases/DefinedCreateInfiniteQueryResult.md)\<`TData`, `TError`\> The infinite query result. @@ -106,19 +106,19 @@ Infinite queries can additively "load more" data onto an existing set of data or #### injectInfiniteQueryFn -() => [`UndefinedInitialDataInfiniteOptions`](../../type-aliases/UndefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> +() => [`UndefinedInitialDataInfiniteOptions`](../type-aliases/UndefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> A function that returns infinite query options. #### options? -[`InjectInfiniteQueryOptions`](../../interfaces/InjectInfiniteQueryOptions.md) +[`InjectInfiniteQueryOptions`](../interfaces/InjectInfiniteQueryOptions.md) Additional configuration. ### Returns -[`CreateInfiniteQueryResult`](../../type-aliases/CreateInfiniteQueryResult.md)\<`TData`, `TError`\> +[`CreateInfiniteQueryResult`](../type-aliases/CreateInfiniteQueryResult.md)\<`TData`, `TError`\> The infinite query result. @@ -159,18 +159,18 @@ Infinite queries can additively "load more" data onto an existing set of data or #### injectInfiniteQueryFn -() => [`CreateInfiniteQueryOptions`](../../interfaces/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> +() => [`CreateInfiniteQueryOptions`](../interfaces/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> A function that returns infinite query options. #### options? -[`InjectInfiniteQueryOptions`](../../interfaces/InjectInfiniteQueryOptions.md) +[`InjectInfiniteQueryOptions`](../interfaces/InjectInfiniteQueryOptions.md) Additional configuration. ### Returns -[`CreateInfiniteQueryResult`](../../type-aliases/CreateInfiniteQueryResult.md)\<`TData`, `TError`\> +[`CreateInfiniteQueryResult`](../type-aliases/CreateInfiniteQueryResult.md)\<`TData`, `TError`\> The infinite query result. diff --git a/docs/framework/angular/reference/functions/injectIsFetching.md b/docs/framework/angular/reference/functions/injectIsFetching.md index 66610b1375..c9943ca0c5 100644 --- a/docs/framework/angular/reference/functions/injectIsFetching.md +++ b/docs/framework/angular/reference/functions/injectIsFetching.md @@ -26,7 +26,7 @@ The filters to apply to the query. ### options? -[`InjectIsFetchingOptions`](../../interfaces/InjectIsFetchingOptions.md) +[`InjectIsFetchingOptions`](../interfaces/InjectIsFetchingOptions.md) Additional configuration diff --git a/docs/framework/angular/reference/functions/injectIsMutating.md b/docs/framework/angular/reference/functions/injectIsMutating.md index b1655867b6..35d2ff4b82 100644 --- a/docs/framework/angular/reference/functions/injectIsMutating.md +++ b/docs/framework/angular/reference/functions/injectIsMutating.md @@ -25,7 +25,7 @@ The filters to apply to the query. ### options? -[`InjectIsMutatingOptions`](../../interfaces/InjectIsMutatingOptions.md) +[`InjectIsMutatingOptions`](../interfaces/InjectIsMutatingOptions.md) Additional configuration diff --git a/docs/framework/angular/reference/functions/injectIsRestoring.md b/docs/framework/angular/reference/functions/injectIsRestoring.md index 7c9bb0f5a4..c817d0e48f 100644 --- a/docs/framework/angular/reference/functions/injectIsRestoring.md +++ b/docs/framework/angular/reference/functions/injectIsRestoring.md @@ -11,7 +11,7 @@ function injectIsRestoring(options?): Signal; Defined in: [inject-is-restoring.ts:32](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-is-restoring.ts#L32) -Injects a signal that tracks whether a restore is currently in progress. [injectQuery](../injectQuery.md) and friends also check this internally to avoid race conditions between the restore and initializing queries. +Injects a signal that tracks whether a restore is currently in progress. [injectQuery](./injectQuery.md) and friends also check this internally to avoid race conditions between the restore and initializing queries. ## Parameters diff --git a/docs/framework/angular/reference/functions/injectMutation.md b/docs/framework/angular/reference/functions/injectMutation.md index 4a541a432d..5b4690eb46 100644 --- a/docs/framework/angular/reference/functions/injectMutation.md +++ b/docs/framework/angular/reference/functions/injectMutation.md @@ -37,18 +37,18 @@ Unlike queries, mutations are not run automatically. ### injectMutationFn -() => [`CreateMutationOptions`](../../interfaces/CreateMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\> +() => [`CreateMutationOptions`](../interfaces/CreateMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\> A function that returns mutation options. ### options? -[`InjectMutationOptions`](../../interfaces/InjectMutationOptions.md) +[`InjectMutationOptions`](../interfaces/InjectMutationOptions.md) Additional configuration ## Returns -[`CreateMutationResult`](../../type-aliases/CreateMutationResult.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\> +[`CreateMutationResult`](../type-aliases/CreateMutationResult.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\> The mutation. diff --git a/docs/framework/angular/reference/functions/injectMutationState.md b/docs/framework/angular/reference/functions/injectMutationState.md index d42d34567c..100e36bc54 100644 --- a/docs/framework/angular/reference/functions/injectMutationState.md +++ b/docs/framework/angular/reference/functions/injectMutationState.md @@ -29,7 +29,7 @@ A function that returns mutation state options. ### options? -[`InjectMutationStateOptions`](../../interfaces/InjectMutationStateOptions.md) +[`InjectMutationStateOptions`](../interfaces/InjectMutationStateOptions.md) The Angular injector to use. diff --git a/docs/framework/angular/reference/functions/injectQuery.md b/docs/framework/angular/reference/functions/injectQuery.md index 8ce2df76e6..8fa6832b09 100644 --- a/docs/framework/angular/reference/functions/injectQuery.md +++ b/docs/framework/angular/reference/functions/injectQuery.md @@ -109,19 +109,19 @@ class ServiceOrComponent { #### injectQueryFn -() => [`DefinedInitialDataOptions`](../../type-aliases/DefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> +() => [`DefinedInitialDataOptions`](../type-aliases/DefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> A function that returns query options. #### options? -[`InjectQueryOptions`](../../interfaces/InjectQueryOptions.md) +[`InjectQueryOptions`](../interfaces/InjectQueryOptions.md) Additional configuration ### Returns -[`DefinedCreateQueryResult`](../../type-aliases/DefinedCreateQueryResult.md)\<`TData`, `TError`\> +[`DefinedCreateQueryResult`](../type-aliases/DefinedCreateQueryResult.md)\<`TData`, `TError`\> The query result. @@ -190,19 +190,19 @@ class ServiceOrComponent { #### injectQueryFn -() => [`UndefinedInitialDataOptions`](../../type-aliases/UndefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> +() => [`UndefinedInitialDataOptions`](../type-aliases/UndefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> A function that returns query options. #### options? -[`InjectQueryOptions`](../../interfaces/InjectQueryOptions.md) +[`InjectQueryOptions`](../interfaces/InjectQueryOptions.md) Additional configuration ### Returns -[`CreateQueryResult`](../../type-aliases/CreateQueryResult.md)\<`TData`, `TError`\> +[`CreateQueryResult`](../type-aliases/CreateQueryResult.md)\<`TData`, `TError`\> The query result. @@ -271,19 +271,19 @@ class ServiceOrComponent { #### injectQueryFn -() => [`CreateQueryOptions`](../../interfaces/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> +() => [`CreateQueryOptions`](../interfaces/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> A function that returns query options. #### options? -[`InjectQueryOptions`](../../interfaces/InjectQueryOptions.md) +[`InjectQueryOptions`](../interfaces/InjectQueryOptions.md) Additional configuration ### Returns -[`CreateQueryResult`](../../type-aliases/CreateQueryResult.md)\<`TData`, `TError`\> +[`CreateQueryResult`](../type-aliases/CreateQueryResult.md)\<`TData`, `TError`\> The query result. diff --git a/docs/framework/angular/reference/functions/mutationOptions.md b/docs/framework/angular/reference/functions/mutationOptions.md index 8af90d0a2e..bdb7aed6fe 100644 --- a/docs/framework/angular/reference/functions/mutationOptions.md +++ b/docs/framework/angular/reference/functions/mutationOptions.md @@ -103,13 +103,13 @@ class ComponentOrService { #### options -`WithRequired`\<[`CreateMutationOptions`](../../interfaces/CreateMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\> +`WithRequired`\<[`CreateMutationOptions`](../interfaces/CreateMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\> The mutation options. ### Returns -`WithRequired`\<[`CreateMutationOptions`](../../interfaces/CreateMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\> +`WithRequired`\<[`CreateMutationOptions`](../interfaces/CreateMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\> Mutation options. @@ -175,12 +175,12 @@ class ComponentOrService { #### options -`Omit`\<[`CreateMutationOptions`](../../interfaces/CreateMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\> +`Omit`\<[`CreateMutationOptions`](../interfaces/CreateMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\> The mutation options. ### Returns -`Omit`\<[`CreateMutationOptions`](../../interfaces/CreateMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\> +`Omit`\<[`CreateMutationOptions`](../interfaces/CreateMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\> Mutation options. diff --git a/docs/framework/angular/reference/functions/provideQueryClient.md b/docs/framework/angular/reference/functions/provideQueryClient.md index 787fa78ae9..58a0655954 100644 --- a/docs/framework/angular/reference/functions/provideQueryClient.md +++ b/docs/framework/angular/reference/functions/provideQueryClient.md @@ -11,7 +11,7 @@ function provideQueryClient(queryClient): Provider; Defined in: [providers.ts:14](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L14) -Usually [provideTanStackQuery](../provideTanStackQuery.md) is used once to set up TanStack Query and the +Usually [provideTanStackQuery](./provideTanStackQuery.md) is used once to set up TanStack Query and the [https://tanstack.com/query/latest/docs/reference/QueryClient\|QueryClient](https://tanstack.com/query/latest/docs/reference/QueryClient|QueryClient) for the entire application. Internally it calls `provideQueryClient`. You can use `provideQueryClient` to provide a different `QueryClient` instance for a part diff --git a/docs/framework/angular/reference/functions/provideTanStackQuery.md b/docs/framework/angular/reference/functions/provideTanStackQuery.md index 7293ca0fe0..2f8d79f83f 100644 --- a/docs/framework/angular/reference/functions/provideTanStackQuery.md +++ b/docs/framework/angular/reference/functions/provideTanStackQuery.md @@ -88,7 +88,7 @@ A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`. ### features -...[`QueryFeatures`](../../type-aliases/QueryFeatures.md)[] +...[`QueryFeatures`](../type-aliases/QueryFeatures.md)[] Optional features to configure additional Query functionality. diff --git a/docs/framework/angular/reference/functions/queryFeature.md b/docs/framework/angular/reference/functions/queryFeature.md index b89c3e67e3..d3b67f1bfb 100644 --- a/docs/framework/angular/reference/functions/queryFeature.md +++ b/docs/framework/angular/reference/functions/queryFeature.md @@ -31,6 +31,6 @@ Helper function to create an object that represents a Query feature. ## Returns -[`QueryFeature`](../../interfaces/QueryFeature.md)\<`TFeatureKind`\> +[`QueryFeature`](../interfaces/QueryFeature.md)\<`TFeatureKind`\> A Query feature. diff --git a/docs/framework/angular/reference/functions/queryOptions.md b/docs/framework/angular/reference/functions/queryOptions.md index 83a04a61f6..34640111ec 100644 --- a/docs/framework/angular/reference/functions/queryOptions.md +++ b/docs/framework/angular/reference/functions/queryOptions.md @@ -75,13 +75,13 @@ The `queryKey` will be tagged with the type from `queryFn`. #### options -[`DefinedInitialDataOptions`](../../type-aliases/DefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> +[`DefinedInitialDataOptions`](../type-aliases/DefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> The query options to tag with the type from `queryFn`. ### Returns -`Omit`\<[`CreateQueryOptions`](../../interfaces/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>, `"queryFn"`\> & `object` & `object` +`Omit`\<[`CreateQueryOptions`](../interfaces/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>, `"queryFn"`\> & `object` & `object` The tagged query options. @@ -133,13 +133,13 @@ The `queryKey` will be tagged with the type from `queryFn`. #### options -[`UnusedSkipTokenOptions`](../../type-aliases/UnusedSkipTokenOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> +[`UnusedSkipTokenOptions`](../type-aliases/UnusedSkipTokenOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> The query options to tag with the type from `queryFn`. ### Returns -`OmitKeyof`\<[`CreateQueryOptions`](../../interfaces/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>, `"queryFn"`\> & `object` & `object` +`OmitKeyof`\<[`CreateQueryOptions`](../interfaces/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>, `"queryFn"`\> & `object` & `object` The tagged query options. @@ -191,12 +191,12 @@ The `queryKey` will be tagged with the type from `queryFn`. #### options -[`UndefinedInitialDataOptions`](../../type-aliases/UndefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> +[`UndefinedInitialDataOptions`](../type-aliases/UndefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> The query options to tag with the type from `queryFn`. ### Returns -[`CreateQueryOptions`](../../interfaces/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` & `object` +[`CreateQueryOptions`](../interfaces/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` & `object` The tagged query options. diff --git a/docs/framework/angular/reference/index.md b/docs/framework/angular/reference/index.md index 41a9d003d3..2f8f4f40e2 100644 --- a/docs/framework/angular/reference/index.md +++ b/docs/framework/angular/reference/index.md @@ -7,58 +7,58 @@ title: "@tanstack/angular-query-experimental" ## Interfaces -- [BaseMutationNarrowing](../interfaces/BaseMutationNarrowing.md) -- [BaseQueryNarrowing](../interfaces/BaseQueryNarrowing.md) -- [CreateBaseQueryOptions](../interfaces/CreateBaseQueryOptions.md) -- [CreateInfiniteQueryOptions](../interfaces/CreateInfiniteQueryOptions.md) -- [CreateMutationOptions](../interfaces/CreateMutationOptions.md) -- [CreateQueryOptions](../interfaces/CreateQueryOptions.md) -- [InjectInfiniteQueryOptions](../interfaces/InjectInfiniteQueryOptions.md) -- [InjectIsFetchingOptions](../interfaces/InjectIsFetchingOptions.md) -- [InjectIsMutatingOptions](../interfaces/InjectIsMutatingOptions.md) -- [InjectMutationOptions](../interfaces/InjectMutationOptions.md) -- [InjectMutationStateOptions](../interfaces/InjectMutationStateOptions.md) -- [InjectQueryOptions](../interfaces/InjectQueryOptions.md) -- [QueryFeature](../interfaces/QueryFeature.md) +- [BaseMutationNarrowing](./interfaces/BaseMutationNarrowing.md) +- [BaseQueryNarrowing](./interfaces/BaseQueryNarrowing.md) +- [CreateBaseQueryOptions](./interfaces/CreateBaseQueryOptions.md) +- [CreateInfiniteQueryOptions](./interfaces/CreateInfiniteQueryOptions.md) +- [CreateMutationOptions](./interfaces/CreateMutationOptions.md) +- [CreateQueryOptions](./interfaces/CreateQueryOptions.md) +- [InjectInfiniteQueryOptions](./interfaces/InjectInfiniteQueryOptions.md) +- [InjectIsFetchingOptions](./interfaces/InjectIsFetchingOptions.md) +- [InjectIsMutatingOptions](./interfaces/InjectIsMutatingOptions.md) +- [InjectMutationOptions](./interfaces/InjectMutationOptions.md) +- [InjectMutationStateOptions](./interfaces/InjectMutationStateOptions.md) +- [InjectQueryOptions](./interfaces/InjectQueryOptions.md) +- [QueryFeature](./interfaces/QueryFeature.md) ## Type Aliases -- [CreateBaseMutationResult](../type-aliases/CreateBaseMutationResult.md) -- [CreateBaseQueryResult](../type-aliases/CreateBaseQueryResult.md) -- [CreateInfiniteQueryResult](../type-aliases/CreateInfiniteQueryResult.md) -- [CreateMutateAsyncFunction](../type-aliases/CreateMutateAsyncFunction.md) -- [CreateMutateFunction](../type-aliases/CreateMutateFunction.md) -- [CreateMutationResult](../type-aliases/CreateMutationResult.md) -- [CreateQueryResult](../type-aliases/CreateQueryResult.md) -- [DefinedCreateInfiniteQueryResult](../type-aliases/DefinedCreateInfiniteQueryResult.md) -- [DefinedCreateQueryResult](../type-aliases/DefinedCreateQueryResult.md) -- [DefinedInitialDataInfiniteOptions](../type-aliases/DefinedInitialDataInfiniteOptions.md) -- [DefinedInitialDataOptions](../type-aliases/DefinedInitialDataOptions.md) -- [DevtoolsFeature](../type-aliases/DevtoolsFeature.md) -- [PersistQueryClientFeature](../type-aliases/PersistQueryClientFeature.md) -- [QueriesOptions](../type-aliases/QueriesOptions.md) -- [QueriesResults](../type-aliases/QueriesResults.md) -- [QueryFeatures](../type-aliases/QueryFeatures.md) -- [UndefinedInitialDataInfiniteOptions](../type-aliases/UndefinedInitialDataInfiniteOptions.md) -- [UndefinedInitialDataOptions](../type-aliases/UndefinedInitialDataOptions.md) -- [UnusedSkipTokenInfiniteOptions](../type-aliases/UnusedSkipTokenInfiniteOptions.md) -- [UnusedSkipTokenOptions](../type-aliases/UnusedSkipTokenOptions.md) +- [CreateBaseMutationResult](./type-aliases/CreateBaseMutationResult.md) +- [CreateBaseQueryResult](./type-aliases/CreateBaseQueryResult.md) +- [CreateInfiniteQueryResult](./type-aliases/CreateInfiniteQueryResult.md) +- [CreateMutateAsyncFunction](./type-aliases/CreateMutateAsyncFunction.md) +- [CreateMutateFunction](./type-aliases/CreateMutateFunction.md) +- [CreateMutationResult](./type-aliases/CreateMutationResult.md) +- [CreateQueryResult](./type-aliases/CreateQueryResult.md) +- [DefinedCreateInfiniteQueryResult](./type-aliases/DefinedCreateInfiniteQueryResult.md) +- [DefinedCreateQueryResult](./type-aliases/DefinedCreateQueryResult.md) +- [DefinedInitialDataInfiniteOptions](./type-aliases/DefinedInitialDataInfiniteOptions.md) +- [DefinedInitialDataOptions](./type-aliases/DefinedInitialDataOptions.md) +- [DevtoolsFeature](./type-aliases/DevtoolsFeature.md) +- [PersistQueryClientFeature](./type-aliases/PersistQueryClientFeature.md) +- [QueriesOptions](./type-aliases/QueriesOptions.md) +- [QueriesResults](./type-aliases/QueriesResults.md) +- [QueryFeatures](./type-aliases/QueryFeatures.md) +- [UndefinedInitialDataInfiniteOptions](./type-aliases/UndefinedInitialDataInfiniteOptions.md) +- [UndefinedInitialDataOptions](./type-aliases/UndefinedInitialDataOptions.md) +- [UnusedSkipTokenInfiniteOptions](./type-aliases/UnusedSkipTokenInfiniteOptions.md) +- [UnusedSkipTokenOptions](./type-aliases/UnusedSkipTokenOptions.md) ## Functions -- [infiniteQueryOptions](../functions/infiniteQueryOptions.md) -- [injectInfiniteQuery](../functions/injectInfiniteQuery.md) -- [injectIsFetching](../functions/injectIsFetching.md) -- [injectIsMutating](../functions/injectIsMutating.md) -- [injectIsRestoring](../functions/injectIsRestoring.md) -- [injectMutation](../functions/injectMutation.md) -- [injectMutationState](../functions/injectMutationState.md) -- [injectQuery](../functions/injectQuery.md) -- [~~injectQueryClient~~](../functions/injectQueryClient.md) -- [mutationOptions](../functions/mutationOptions.md) -- [~~provideAngularQuery~~](../functions/provideAngularQuery.md) -- [provideIsRestoring](../functions/provideIsRestoring.md) -- [provideQueryClient](../functions/provideQueryClient.md) -- [provideTanStackQuery](../functions/provideTanStackQuery.md) -- [queryFeature](../functions/queryFeature.md) -- [queryOptions](../functions/queryOptions.md) +- [infiniteQueryOptions](./functions/infiniteQueryOptions.md) +- [injectInfiniteQuery](./functions/injectInfiniteQuery.md) +- [injectIsFetching](./functions/injectIsFetching.md) +- [injectIsMutating](./functions/injectIsMutating.md) +- [injectIsRestoring](./functions/injectIsRestoring.md) +- [injectMutation](./functions/injectMutation.md) +- [injectMutationState](./functions/injectMutationState.md) +- [injectQuery](./functions/injectQuery.md) +- [~~injectQueryClient~~](./functions/injectQueryClient.md) +- [mutationOptions](./functions/mutationOptions.md) +- [~~provideAngularQuery~~](./functions/provideAngularQuery.md) +- [provideIsRestoring](./functions/provideIsRestoring.md) +- [provideQueryClient](./functions/provideQueryClient.md) +- [provideTanStackQuery](./functions/provideTanStackQuery.md) +- [queryFeature](./functions/queryFeature.md) +- [queryOptions](./functions/queryOptions.md) diff --git a/docs/framework/angular/reference/interfaces/BaseQueryNarrowing.md b/docs/framework/angular/reference/interfaces/BaseQueryNarrowing.md index a9f38b98c5..bc7811b6ae 100644 --- a/docs/framework/angular/reference/interfaces/BaseQueryNarrowing.md +++ b/docs/framework/angular/reference/interfaces/BaseQueryNarrowing.md @@ -31,7 +31,7 @@ Defined in: [types.ts:65](https://github.com/TanStack/query/blob/main/packages/a ##### this -[`CreateBaseQueryResult`](../../type-aliases/CreateBaseQueryResult.md)\<`TData`, `TError`\> +[`CreateBaseQueryResult`](../type-aliases/CreateBaseQueryResult.md)\<`TData`, `TError`\> #### Returns @@ -51,7 +51,7 @@ Defined in: [types.ts:72](https://github.com/TanStack/query/blob/main/packages/a ##### this -[`CreateBaseQueryResult`](../../type-aliases/CreateBaseQueryResult.md)\<`TData`, `TError`\> +[`CreateBaseQueryResult`](../type-aliases/CreateBaseQueryResult.md)\<`TData`, `TError`\> #### Returns @@ -71,7 +71,7 @@ Defined in: [types.ts:58](https://github.com/TanStack/query/blob/main/packages/a ##### this -[`CreateBaseQueryResult`](../../type-aliases/CreateBaseQueryResult.md)\<`TData`, `TError`\> +[`CreateBaseQueryResult`](../type-aliases/CreateBaseQueryResult.md)\<`TData`, `TError`\> #### Returns diff --git a/docs/framework/angular/reference/interfaces/CreateQueryOptions.md b/docs/framework/angular/reference/interfaces/CreateQueryOptions.md index 4319a1c9cc..24953faf9b 100644 --- a/docs/framework/angular/reference/interfaces/CreateQueryOptions.md +++ b/docs/framework/angular/reference/interfaces/CreateQueryOptions.md @@ -9,7 +9,7 @@ Defined in: [types.ts:35](https://github.com/TanStack/query/blob/main/packages/a ## Extends -- `OmitKeyof`\<[`CreateBaseQueryOptions`](../CreateBaseQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryFnData`, `TQueryKey`\>, `"suspense"`\> +- `OmitKeyof`\<[`CreateBaseQueryOptions`](./CreateBaseQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryFnData`, `TQueryKey`\>, `"suspense"`\> ## Type Parameters diff --git a/docs/framework/angular/reference/type-aliases/CreateMutationResult.md b/docs/framework/angular/reference/type-aliases/CreateMutationResult.md index 94526a3b34..6a033c0862 100644 --- a/docs/framework/angular/reference/type-aliases/CreateMutationResult.md +++ b/docs/framework/angular/reference/type-aliases/CreateMutationResult.md @@ -31,4 +31,4 @@ Defined in: [types.ts:266](https://github.com/TanStack/query/blob/main/packages/ ### TState -`TState` = `CreateStatusBasedMutationResult`\<[`CreateBaseMutationResult`](../CreateBaseMutationResult.md)\[`"status"`\], `TData`, `TError`, `TVariables`, `TOnMutateResult`\> +`TState` = `CreateStatusBasedMutationResult`\<[`CreateBaseMutationResult`](./CreateBaseMutationResult.md)\[`"status"`\], `TData`, `TError`, `TVariables`, `TOnMutateResult`\> diff --git a/docs/framework/angular/reference/type-aliases/QueryFeatures.md b/docs/framework/angular/reference/type-aliases/QueryFeatures.md index 4476e1753e..d7d79a75d6 100644 --- a/docs/framework/angular/reference/type-aliases/QueryFeatures.md +++ b/docs/framework/angular/reference/type-aliases/QueryFeatures.md @@ -20,4 +20,4 @@ documentation on how to use those functions. ## See -[provideTanStackQuery](../../functions/provideTanStackQuery.md) +[provideTanStackQuery](../functions/provideTanStackQuery.md) diff --git a/docs/framework/react/guides/advanced-ssr.md b/docs/framework/react/guides/advanced-ssr.md index 6961b339f0..db9db2f9a2 100644 --- a/docs/framework/react/guides/advanced-ssr.md +++ b/docs/framework/react/guides/advanced-ssr.md @@ -5,7 +5,7 @@ title: Advanced Server Rendering Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router. -You might want to read the [Server Rendering & Hydration guide](../ssr.md) before this one as it teaches the basics for using React Query with SSR, and [Performance & Request Waterfalls](../request-waterfalls.md) as well as [Prefetching & Router Integration](../prefetching.md) also contains valuable background. +You might want to read the [Server Rendering & Hydration guide](./ssr.md) before this one as it teaches the basics for using React Query with SSR, and [Performance & Request Waterfalls](./request-waterfalls.md) as well as [Prefetching & Router Integration](./prefetching.md) also contains valuable background. Before we start, let's note that while the `initialData` approach outlined in the SSR guide also works with Server Components, we'll focus this guide on the hydration APIs. @@ -13,7 +13,7 @@ Before we start, let's note that while the `initialData` approach outlined in th We won't cover Server Components in depth here, but the short version is that they are components that are guaranteed to _only_ run on the server, both for the initial page view and **also on page transitions**. This is similar to how Next.js `getServerSideProps`/`getStaticProps` and Remix `loader` works, as these also always run on the server but while those can only return data, Server Components can do a lot more. The data part is central to React Query however, so let's focus on that. -How do we take what we learned in the Server Rendering guide about [passing data prefetched in framework loaders to the app](../ssr.md#using-the-hydration-apis) and apply that to Server Components and the Next.js app router? The best way to start thinking about this is to consider Server Components as "just" another framework loader. +How do we take what we learned in the Server Rendering guide about [passing data prefetched in framework loaders to the app](./ssr.md#using-the-hydration-apis) and apply that to Server Components and the Next.js app router? The best way to start thinking about this is to consider Server Components as "just" another framework loader. ### A quick note on terminology @@ -530,7 +530,7 @@ export default function Posts() { Now, your `getPosts` function can return e.g. `Temporal` datetime objects and the data will be serialized and deserialized on the client, assuming your transformer can serialize and deserialize those data types. -For more information, check out the [Next.js App with Prefetching Example](../../examples/nextjs-app-prefetching). +For more information, check out the [Next.js App with Prefetching Example](../examples/nextjs-app-prefetching). ## Experimental streaming without prefetching in Next.js @@ -597,11 +597,11 @@ export function Providers(props: { children: React.ReactNode }) { } ``` -For more information, check out the [NextJs Suspense Streaming Example](../../examples/nextjs-suspense-streaming). +For more information, check out the [NextJs Suspense Streaming Example](../examples/nextjs-suspense-streaming). The big upside is that you no longer need to prefetch queries manually to have SSR work, and it even still streams in the result! This gives you phenomenal DX and lower code complexity. -The downside is easiest to explain if we look back at [the complex request waterfall example](../request-waterfalls.md#code-splitting) in the Performance & Request Waterfalls guide. Server Components with prefetching effectively eliminates the request waterfalls both for the initial page load **and** any subsequent navigation. This prefetch-less approach however will only flatten the waterfalls on the initial page load but ends up the same deep waterfall as the original example on page navigations: +The downside is easiest to explain if we look back at [the complex request waterfall example](./request-waterfalls.md#code-splitting) in the Performance & Request Waterfalls guide. Server Components with prefetching effectively eliminates the request waterfalls both for the initial page load **and** any subsequent navigation. This prefetch-less approach however will only flatten the waterfalls on the initial page load but ends up the same deep waterfall as the original example on page navigations: ``` 1. |> JS for diff --git a/docs/framework/react/guides/caching.md b/docs/framework/react/guides/caching.md index 116533c89b..249d92bd10 100644 --- a/docs/framework/react/guides/caching.md +++ b/docs/framework/react/guides/caching.md @@ -3,7 +3,7 @@ id: caching title: Caching Examples --- -> Please thoroughly read the [Important Defaults](../important-defaults.md) before reading this guide +> Please thoroughly read the [Important Defaults](./important-defaults.md) before reading this guide ## Basic Example @@ -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/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**). diff --git a/docs/framework/react/guides/dependent-queries.md b/docs/framework/react/guides/dependent-queries.md index 2fdf147177..c2920012fc 100644 --- a/docs/framework/react/guides/dependent-queries.md +++ b/docs/framework/react/guides/dependent-queries.md @@ -90,6 +90,6 @@ const usersMessages = useQueries({ ## A note about performance -Dependent queries by definition constitutes a form of [request waterfall](../request-waterfalls.md), which hurts performance. If we pretend both queries take the same amount of time, doing them serially instead of in parallel always takes twice as much time, which is especially hurtful when it happens on a client that has high latency. If you can, it's always better to restructure the backend APIs so that both queries can be fetched in parallel, though that might not always be practically feasible. +Dependent queries by definition constitutes a form of [request waterfall](./request-waterfalls.md), which hurts performance. If we pretend both queries take the same amount of time, doing them serially instead of in parallel always takes twice as much time, which is especially hurtful when it happens on a client that has high latency. If you can, it's always better to restructure the backend APIs so that both queries can be fetched in parallel, though that might not always be practically feasible. In the example above, instead of first fetching `getUserByEmail` to be able to `getProjectsByUser`, introducing a new `getProjectsByUserEmail` query would flatten the waterfall. diff --git a/docs/framework/react/guides/important-defaults.md b/docs/framework/react/guides/important-defaults.md index e6183996b9..1c71b0f758 100644 --- a/docs/framework/react/guides/important-defaults.md +++ b/docs/framework/react/guides/important-defaults.md @@ -10,9 +10,9 @@ Out of the box, TanStack Query is configured with **aggressive but sane** defaul > To change this behavior, you can configure your queries both globally and per-query using the `staleTime` option. Specifying a longer `staleTime` means queries will not refetch their data as often - A Query that has a `staleTime` set is considered **fresh** until that `staleTime` has elapsed. - - set `staleTime` to e.g. `2 * 60 * 1000` to make sure data is read from the cache, without triggering any kinds of refetches, for 2 minutes, or until the Query is [invalidated manually](../query-invalidation.md). - - set `staleTime` to `Infinity` to never trigger a refetch until the Query is [invalidated manually](../query-invalidation.md). - - set `staleTime` to `'static'` to **never** trigger a refetch, even if the Query is [invalidated manually](../query-invalidation.md). + - set `staleTime` to e.g. `2 * 60 * 1000` to make sure data is read from the cache, without triggering any kinds of refetches, for 2 minutes, or until the Query is [invalidated manually](./query-invalidation.md). + - set `staleTime` to `Infinity` to never trigger a refetch until the Query is [invalidated manually](./query-invalidation.md). + - set `staleTime` to `'static'` to **never** trigger a refetch, even if the Query is [invalidated manually](./query-invalidation.md). - Stale queries are refetched automatically in the background when: - New instances of the query mount @@ -40,7 +40,7 @@ Out of the box, TanStack Query is configured with **aggressive but sane** defaul ## Further Reading -Have a look at the following articles from our [Community Resources](../../../../community-resources) for further explanations of the defaults: +Have a look at the following articles from our [Community Resources](../../../community-resources) for further explanations of the defaults: - [Practical React Query](https://tkdodo.eu/blog/practical-react-query) - [React Query as a State Manager](https://tkdodo.eu/blog/react-query-as-a-state-manager) diff --git a/docs/framework/react/guides/initial-query-data.md b/docs/framework/react/guides/initial-query-data.md index bc6ed2ce34..971d05af8f 100644 --- a/docs/framework/react/guides/initial-query-data.md +++ b/docs/framework/react/guides/initial-query-data.md @@ -8,8 +8,8 @@ There are many ways to supply initial data for a query to the cache before you n - Declaratively: - Provide `initialData` to a query to prepopulate its cache if empty - Imperatively: - - [Prefetch the data using `queryClient.prefetchQuery`](../prefetching.md) - - [Manually place the data into the cache using `queryClient.setQueryData`](../prefetching.md) + - [Prefetch the data using `queryClient.prefetchQuery`](./prefetching.md) + - [Manually place the data into the cache using `queryClient.setQueryData`](./prefetching.md) ## Using `initialData` to prepopulate a query diff --git a/docs/framework/react/guides/invalidations-from-mutations.md b/docs/framework/react/guides/invalidations-from-mutations.md index 6f2198021c..c3ccc1032b 100644 --- a/docs/framework/react/guides/invalidations-from-mutations.md +++ b/docs/framework/react/guides/invalidations-from-mutations.md @@ -46,7 +46,7 @@ Returning a Promise on `onSuccess` makes sure the data is updated before the mut [//]: # 'Example2' -You can wire up your invalidations to happen using any of the callbacks available in the [`useMutation` hook](../mutations.md) +You can wire up your invalidations to happen using any of the callbacks available in the [`useMutation` hook](./mutations.md) [//]: # 'Materials' diff --git a/docs/framework/react/guides/migrating-to-react-query-3.md b/docs/framework/react/guides/migrating-to-react-query-3.md index b646580605..5f22f64de4 100644 --- a/docs/framework/react/guides/migrating-to-react-query-3.md +++ b/docs/framework/react/guides/migrating-to-react-query-3.md @@ -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/QueryErrorResetBoundary.md) +- [useQueryErrorResetBoundary](../reference/useQueryErrorResetBoundary.md) ### `QueryCache.getQuery()` has been replaced by `QueryCache.find()`. diff --git a/docs/framework/react/guides/migrating-to-react-query-4.md b/docs/framework/react/guides/migrating-to-react-query-4.md index ba41113f47..8216b53581 100644 --- a/docs/framework/react/guides/migrating-to-react-query-4.md +++ b/docs/framework/react/guides/migrating-to-react-query-4.md @@ -58,9 +58,9 @@ Please note in the case of `TypeScript` you need to use `tsx` as the parser; oth ### Query Keys (and Mutation Keys) need to be an Array -In v3, Query and Mutation Keys could be a String or an Array. Internally, React Query has always worked with Array Keys only, and we've sometimes exposed this to consumers. For example, in the `queryFn`, you would always get the key as an Array to make working with [Default Query Functions](../default-query-function.md) easier. +In v3, Query and Mutation Keys could be a String or an Array. Internally, React Query has always worked with Array Keys only, and we've sometimes exposed this to consumers. For example, in the `queryFn`, you would always get the key as an Array to make working with [Default Query Functions](./default-query-function.md) easier. -However, we have not followed this concept through to all apis. For example, when using the `predicate` function on [Query Filters](../filters.md) you would get the raw Query Key. This makes it difficult to work with such functions if you use Query Keys that are mixed Arrays and Strings. The same was true when using global callbacks. +However, we have not followed this concept through to all apis. For example, when using the `predicate` function on [Query Filters](./filters.md) you would get the raw Query Key. This makes it difficult to work with such functions if you use Query Keys that are mixed Arrays and Strings. The same was true when using global callbacks. To streamline all apis, we've decided to make all keys Arrays only: @@ -100,7 +100,7 @@ Please note in the case of `TypeScript` you need to use `tsx` as the parser; oth ### The idle state has been removed -With the introduction of the new [fetchStatus](../queries.md#fetchstatus) for better offline support, the `idle` state became irrelevant, because `fetchStatus: 'idle'` captures the same state better. For more information, please read [Why two different states](../queries.md#why-two-different-states). +With the introduction of the new [fetchStatus](./queries.md#fetchstatus) for better offline support, the `idle` state became irrelevant, because `fetchStatus: 'idle'` captures the same state better. For more information, please read [Why two different states](./queries.md#why-two-different-states). This will mostly affect `disabled` queries that don't have any `data` yet, as those were in `idle` state before: @@ -110,7 +110,7 @@ This will mostly affect `disabled` queries that don't have any `data` yet, as th + fetchStatus: 'idle' // [!code ++] ``` -Also, have a look at [the guide on dependent queries](../dependent-queries.md) +Also, have a look at [the guide on dependent queries](./dependent-queries.md) #### disabled queries @@ -121,7 +121,7 @@ Due to this change, disabled queries (even temporarily disabled ones) will start isInitialLoading // [!code ++] ``` -See also the guide on [disabling queries](../disabling-queries.md#isInitialLoading) +See also the guide on [disabling queries](./disabling-queries.md#isInitialLoading) ### new API for `useQueries` @@ -142,7 +142,7 @@ The `useQueries` hook now accepts an object with a `queries` prop as its input. ### Undefined is an illegal cache value for successful queries -In order to make bailing out of updates possible by returning `undefined`, we had to make `undefined` an illegal cache value. This is in-line with other concepts of react-query, for example, returning `undefined` from the [initialData function](../initial-query-data.md#initial-data-function) will also _not_ set data. +In order to make bailing out of updates possible by returning `undefined`, we had to make `undefined` an illegal cache value. This is in-line with other concepts of react-query, for example, returning `undefined` from the [initialData function](./initial-query-data.md#initial-data-function) will also _not_ set data. Further, it is an easy bug to produce `Promise` by adding logging in the queryFn: @@ -156,7 +156,7 @@ This is now disallowed on type level; at runtime, `undefined` will be transforme ### Queries and mutations, per default, need network connection to run -Please read the [New Features announcement](#proper-offline-support) about online / offline support, and also the dedicated page about [Network mode](../network-mode.md) +Please read the [New Features announcement](#proper-offline-support) about online / offline support, and also the dedicated page about [Network mode](./network-mode.md) Even though React Query is an Async State Manager that can be used for anything that produces a Promise, it is most often used for data fetching in combination with data fetching libraries. That is why, per default, queries and mutations will be `paused` if there is no network connection. If you want to opt-in to the previous behavior, you can globally set `networkMode: offlineFirst` for both queries and mutations: @@ -217,7 +217,7 @@ queryClient.refetchQueries({ queryKey: ['todos'] }, { cancelRefetch: false }) ### Query Filters -A [query filter](../filters.md) is an object with certain conditions to match a query. Historically, the filter options have mostly been a combination of boolean flags. However, combining those flags can lead to impossible states. Specifically: +A [query filter](./filters.md) is an object with certain conditions to match a query. Historically, the filter options have mostly been a combination of boolean flags. However, combining those flags can lead to impossible states. Specifically: ``` active?: boolean @@ -242,7 +242,7 @@ The filter defaults to `all`, and you can choose to only match `active` or `inac #### refetchActive / refetchInactive -[queryClient.invalidateQueries](../../../../reference/QueryClient.md#queryclientinvalidatequeries) had two additional, similar flags: +[queryClient.invalidateQueries](../../../reference/QueryClient.md#queryclientinvalidatequeries) had two additional, similar flags: ``` refetchActive: Boolean @@ -280,7 +280,7 @@ React.useEffect(() => mySideEffectHere(data), [data]) ### `persistQueryClient` and the corresponding persister plugins are no longer experimental and have been renamed -The plugins `createWebStoragePersistor` and `createAsyncStoragePersistor` have been renamed to [`createSyncStoragePersister`](../../plugins/createSyncStoragePersister.md) and [`createAsyncStoragePersister`](../../plugins/createAsyncStoragePersister.md) respectively. The interface `Persistor` in `persistQueryClient` has also been renamed to `Persister`. Checkout [this stackexchange](https://english.stackexchange.com/questions/206893/persister-or-persistor) for the motivation of this change. +The plugins `createWebStoragePersistor` and `createAsyncStoragePersistor` have been renamed to [`createSyncStoragePersister`](../plugins/createSyncStoragePersister.md) and [`createAsyncStoragePersister`](../plugins/createAsyncStoragePersister.md) respectively. The interface `Persistor` in `persistQueryClient` has also been renamed to `Persister`. Checkout [this stackexchange](https://english.stackexchange.com/questions/206893/persister-or-persistor) for the motivation of this change. Since these plugins are no longer experimental, their import paths have also been updated: @@ -296,7 +296,7 @@ Since these plugins are no longer experimental, their import paths have also bee ### The `cancel` method on promises is no longer supported -The [old `cancel` method](../query-cancellation.md#old-cancel-function) that allowed you to define a `cancel` function on promises, which was then used by the library to support query cancellation, has been removed. We recommend to use the [newer API](../query-cancellation.md) (introduced with v3.30.0) for query cancellation that uses the [`AbortController` API](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) internally and provides you with an [`AbortSignal` instance](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) for your query function to support query cancellation. +The [old `cancel` method](./query-cancellation.md#old-cancel-function) that allowed you to define a `cancel` function on promises, which was then used by the library to support query cancellation, has been removed. We recommend to use the [newer API](./query-cancellation.md) (introduced with v3.30.0) for query cancellation that uses the [`AbortController` API](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) internally and provides you with an [`AbortSignal` instance](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) for your query function to support query cancellation. ### TypeScript @@ -304,7 +304,7 @@ Types now require using TypeScript v4.1 or greater ### Supported Browsers -As of v4, React Query is optimized for modern browsers. We have updated our browserslist to produce a more modern, performant and smaller bundle. You can read about the requirements [here](../../installation#requirements). +As of v4, React Query is optimized for modern browsers. We have updated our browserslist to produce a more modern, performant and smaller bundle. You can read about the requirements [here](../installation#requirements). ### `setLogger` is removed @@ -419,7 +419,7 @@ In v3, React Query has always fired off queries and mutations, but then taken th - You are offline and want to fire off a query that doesn't necessarily need network connection (because you _can_ use React Query for something other than data fetching), but it fails for some other reason. That query will now be paused until you go online again. - Window focus refetching didn't do anything at all if you were offline. -With v4, React Query introduces a new `networkMode` to tackle all these issues. Please read the dedicated page about the new [Network mode](../network-mode) for more information. +With v4, React Query introduces a new `networkMode` to tackle all these issues. Please read the dedicated page about the new [Network mode](./network-mode) for more information. ### Tracked Queries per default @@ -427,7 +427,7 @@ React Query defaults to "tracking" query properties, which should give you a nic ### Bailing out of updates with setQueryData -When using the [functional updater form of setQueryData](../../../../reference/QueryClient.md#queryclientsetquerydata), you can now bail out of the update by returning `undefined`. This is helpful if `undefined` is given to you as `previousValue`, which means that currently, no cached entry exists and you don't want to / cannot create one, like in the example of toggling a todo: +When using the [functional updater form of setQueryData](../../../reference/QueryClient.md#queryclientsetquerydata), you can now bail out of the update by returning `undefined`. This is helpful if `undefined` is given to you as `previousValue`, which means that currently, no cached entry exists and you don't want to / cannot create one, like in the example of toggling a todo: ```tsx queryClient.setQueryData(['todo', id], (previousTodo) => diff --git a/docs/framework/react/guides/migrating-to-v5.md b/docs/framework/react/guides/migrating-to-v5.md index b94f412bf3..d790bc9b0d 100644 --- a/docs/framework/react/guides/migrating-to-v5.md +++ b/docs/framework/react/guides/migrating-to-v5.md @@ -169,7 +169,7 @@ Custom loggers were already deprecated in 4 and have been removed in this versio ### Supported Browsers -We have updated our browserslist to produce a more modern, performant and smaller bundle. You can read about the requirements [here](../../installation#requirements). +We have updated our browserslist to produce a more modern, performant and smaller bundle. You can read about the requirements [here](../installation#requirements). ### Private class fields and methods @@ -218,7 +218,7 @@ useQuery({ }) ``` -For a way to set a different kind of Error globally, see [the TypeScript Guide](../../typescript.md#registering-a-global-error). +For a way to set a different kind of Error globally, see [the TypeScript Guide](../typescript.md#registering-a-global-error). ### eslint `prefer-query-object-syntax` rule is removed @@ -480,7 +480,7 @@ if (queryInfo.data) { } ``` -Here, we are only changing how the UI looks when the mutation is running instead of writing data directly to the cache. This works best if we only have one place where we need to show the optimistic update. For more details, have a look at the [optimistic updates documentation](../optimistic-updates.md). +Here, we are only changing how the UI looks when the mutation is running instead of writing data directly to the cache. This works best if we only have one place where we need to show the optimistic update. For more details, have a look at the [optimistic updates documentation](./optimistic-updates.md). ### Limited, Infinite Queries with new maxPages option @@ -494,21 +494,21 @@ Note that the infinite list must be bi-directional, which requires both `getNext ### Infinite Queries can prefetch multiple pages -Infinite Queries can be prefetched like regular Queries. Per default, only the first page of the Query will be prefetched and will be stored under the given QueryKey. If you want to prefetch more than one page, you can use the `pages` option. Read the [prefetching guide](../prefetching.md) for more information. +Infinite Queries can be prefetched like regular Queries. Per default, only the first page of the Query will be prefetched and will be stored under the given QueryKey. If you want to prefetch more than one page, you can use the `pages` option. Read the [prefetching guide](./prefetching.md) for more information. ### New `combine` option for `useQueries` -See the [useQueries docs](../../reference/useQueries.md#combine) for more details. +See the [useQueries docs](../reference/useQueries.md#combine) for more details. ### Experimental `fine grained storage persister` -See the [experimental_createPersister docs](../../plugins/createPersister.md) for more details. +See the [experimental_createPersister docs](../plugins/createPersister.md) for more details. [//]: # 'FrameworkSpecificNewFeatures' ### Typesafe way to create Query Options -See the [TypeScript docs](../../typescript.md#typing-query-options) for more details. +See the [TypeScript docs](../typescript.md#typing-query-options) for more details. ### new hooks for suspense @@ -524,6 +524,6 @@ const { data: post } = useSuspenseQuery({ The experimental `suspense: boolean` flag on the query hooks has been removed. -You can read more about them in the [suspense docs](../suspense.md). +You can read more about them in the [suspense docs](./suspense.md). [//]: # 'FrameworkSpecificNewFeatures' diff --git a/docs/framework/react/guides/mutations.md b/docs/framework/react/guides/mutations.md index ced1fcfc12..6cee474450 100644 --- a/docs/framework/react/guides/mutations.md +++ b/docs/framework/react/guides/mutations.md @@ -59,7 +59,7 @@ Beyond those primary states, more information is available depending on the stat In the example above, you also saw that you can pass variables to your mutations function by calling the `mutate` function with a **single variable or object**. -Even with just variables, mutations aren't all that special, but when used with the `onSuccess` option, the [Query Client's `invalidateQueries` method](../../../../reference/QueryClient.md#queryclientinvalidatequeries) and the [Query Client's `setQueryData` method](../../../../reference/QueryClient.md#queryclientsetquerydata), mutations become a very powerful tool. +Even with just variables, mutations aren't all that special, but when used with the `onSuccess` option, the [Query Client's `invalidateQueries` method](../../../reference/QueryClient.md#queryclientinvalidatequeries) and the [Query Client's `setQueryData` method](../../../reference/QueryClient.md#queryclientsetquerydata), mutations become a very powerful tool. [//]: # 'Info1' @@ -136,7 +136,7 @@ const CreateTodo = () => { ## Mutation Side Effects -`useMutation` comes with some helper options that allow quick and easy side-effects at any stage during the mutation lifecycle. These come in handy for both [invalidating and refetching queries after mutations](../invalidations-from-mutations.md) and even [optimistic updates](../optimistic-updates.md) +`useMutation` comes with some helper options that allow quick and easy side-effects at any stage during the mutation lifecycle. These come in handy for both [invalidating and refetching queries after mutations](./invalidations-from-mutations.md) and even [optimistic updates](./optimistic-updates.md) [//]: # 'Example4' @@ -343,7 +343,7 @@ queryClient.resumePausedMutations() ### Persisting Offline mutations -If you persist offline mutations with the [persistQueryClient plugin](../../plugins/persistQueryClient.md), mutations cannot be resumed when the page is reloaded unless you provide a default mutation function. +If you persist offline mutations with the [persistQueryClient plugin](../plugins/persistQueryClient.md), mutations cannot be resumed when the page is reloaded unless you provide a default mutation function. This is a technical limitation. When persisting to an external storage, only the state of mutations is persisted, as functions cannot be serialized. After hydration, the component that triggers the mutation might not be mounted, so calling `resumePausedMutations` might yield an error: `No mutationFn found`. @@ -386,7 +386,7 @@ export default function App() { [//]: # 'Example11' -We also have an extensive [offline example](../../examples/offline) that covers both queries and mutations. +We also have an extensive [offline example](../examples/offline) that covers both queries and mutations. ## Mutation Scopes diff --git a/docs/framework/react/guides/network-mode.md b/docs/framework/react/guides/network-mode.md index ee49f02574..6457f6b145 100644 --- a/docs/framework/react/guides/network-mode.md +++ b/docs/framework/react/guides/network-mode.md @@ -3,13 +3,13 @@ id: network-mode title: Network Mode --- -TanStack Query provides three different network modes to distinguish how [Queries](../queries.md) and [Mutations](../mutations.md) should behave if you have no network connection. This mode can be set for each Query / Mutation individually, or globally via the query / mutation defaults. +TanStack Query provides three different network modes to distinguish how [Queries](./queries.md) and [Mutations](./mutations.md) should behave if you have no network connection. This mode can be set for each Query / Mutation individually, or globally via the query / mutation defaults. Since TanStack Query is most often used for data fetching in combination with data fetching libraries, the default network mode is [online](#network-mode-online). ## Network Mode: online -In this mode, Queries and Mutations will not fire unless you have network connection. This is the default mode. If a fetch is initiated for a query, it will always stay in the `state` (`pending`, `error`, `success`) it is in if the fetch cannot be made because there is no network connection. However, a [fetchStatus](../queries.md#fetchstatus) is exposed additionally. This can be either: +In this mode, Queries and Mutations will not fire unless you have network connection. This is the default mode. If a fetch is initiated for a query, it will always stay in the `state` (`pending`, `error`, `success`) it is in if the fetch cannot be made because there is no network connection. However, a [fetchStatus](./queries.md#fetchstatus) is exposed additionally. This can be either: - `fetching`: The `queryFn` is really executing - a request is in-flight. - `paused`: The query is not executing - it is `paused` until you have connection again @@ -19,7 +19,7 @@ The flags `isFetching` and `isPaused` are derived from this state and exposed fo > Keep in mind that it might not be enough to check for `pending` state to show a loading spinner. Queries can be in `state: 'pending'`, but `fetchStatus: 'paused'` if they are mounting for the first time, and you have no network connection. -If a query runs because you are online, but you go offline while the fetch is still happening, TanStack Query will also pause the retry mechanism. Paused queries will then continue to run once you re-gain network connection. This is independent of `refetchOnReconnect` (which also defaults to `true` in this mode), because it is not a `refetch`, but rather a `continue`. If the query has been [cancelled](../query-cancellation.md) in the meantime, it will not continue. +If a query runs because you are online, but you go offline while the fetch is still happening, TanStack Query will also pause the retry mechanism. Paused queries will then continue to run once you re-gain network connection. This is independent of `refetchOnReconnect` (which also defaults to `true` in this mode), because it is not a `refetch`, but rather a `continue`. If the query has been [cancelled](./query-cancellation.md) in the meantime, it will not continue. ## Network Mode: always @@ -37,7 +37,7 @@ In those situations, the first fetch might succeed because it comes from an offl ## Devtools -The [TanStack Query Devtools](../../devtools.md) will show Queries in a `paused` state if they would be fetching, but there is no network connection. There is also a toggle button to _Mock offline behavior_. Please note that this button will _not_ actually mess with your network connection (you can do that in the browser devtools), but it will set the [OnlineManager](../../../../reference/onlineManager.md) in an offline state. +The [TanStack Query Devtools](../devtools.md) will show Queries in a `paused` state if they would be fetching, but there is no network connection. There is also a toggle button to _Mock offline behavior_. Please note that this button will _not_ actually mess with your network connection (you can do that in the browser devtools), but it will set the [OnlineManager](../../../reference/onlineManager.md) in an offline state. ## Signature diff --git a/docs/framework/react/guides/placeholder-query-data.md b/docs/framework/react/guides/placeholder-query-data.md index ac11c0757a..c8e5c8ccef 100644 --- a/docs/framework/react/guides/placeholder-query-data.md +++ b/docs/framework/react/guides/placeholder-query-data.md @@ -14,7 +14,7 @@ There are a few ways to supply placeholder data for a query to the cache before - Declaratively: - Provide `placeholderData` to a query to prepopulate its cache if empty - Imperatively: - - [Prefetch or fetch the data using `queryClient` and the `placeholderData` option](../prefetching.md) + - [Prefetch or fetch the data using `queryClient` and the `placeholderData` option](./prefetching.md) When we use `placeholderData`, our Query will not be in a `pending` state - it will start out as being in `success` state, because we have `data` to display - even if that data is just "placeholder" data. To distinguish it from "real" data, we will also have the `isPlaceholderData` flag set to `true` on the Query result. @@ -54,7 +54,7 @@ function Todos() { ## Placeholder Data as a Function -`placeholderData` can also be a function, where you can get access to the data and Query meta information of a "previous" successful Query. This is useful for situations where you want to use the data from one query as the placeholder data for another query. When the QueryKey changes, e.g. from `['todos', 1]` to `['todos', 2]`, we can keep displaying "old" data instead of having to show a loading spinner while data is _transitioning_ from one Query to the next. For more information, see [Paginated Queries](../paginated-queries.md). +`placeholderData` can also be a function, where you can get access to the data and Query meta information of a "previous" successful Query. This is useful for situations where you want to use the data from one query as the placeholder data for another query. When the QueryKey changes, e.g. from `['todos', 1]` to `['todos', 2]`, we can keep displaying "old" data instead of having to show a loading spinner while data is _transitioning_ from one Query to the next. For more information, see [Paginated Queries](./paginated-queries.md). [//]: # 'ExampleFunction' diff --git a/docs/framework/react/guides/prefetching.md b/docs/framework/react/guides/prefetching.md index 80c76c978e..ab73c03753 100644 --- a/docs/framework/react/guides/prefetching.md +++ b/docs/framework/react/guides/prefetching.md @@ -12,9 +12,9 @@ There are a few different prefetching patterns: 3. Via router integration 4. During Server Rendering (another form of router integration) -In this guide, we'll take a look at the first three, while the fourth will be covered in depth in the [Server Rendering & Hydration guide](../ssr.md) and the [Advanced Server Rendering guide](../advanced-ssr.md). +In this guide, we'll take a look at the first three, while the fourth will be covered in depth in the [Server Rendering & Hydration guide](./ssr.md) and the [Advanced Server Rendering guide](./advanced-ssr.md). -One specific use of prefetching is to avoid Request Waterfalls, for an in-depth background and explanation of those, see the [Performance & Request Waterfalls guide](../request-waterfalls.md). +One specific use of prefetching is to avoid Request Waterfalls, for an in-depth background and explanation of those, see the [Performance & Request Waterfalls guide](./request-waterfalls.md). ## prefetchQuery & prefetchInfiniteQuery @@ -196,7 +196,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/usePrefetchQuery.md) or the [`usePrefetchInfiniteQuery`](../reference/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 `` boundary so the "secondary" query we are prefetching does not block rendering of the "primary" data. @@ -267,7 +267,7 @@ Let's look at a slightly more advanced case next. ### Dependent Queries & Code Splitting -Sometimes we want to prefetch conditionally, based on the result of another fetch. Consider this example borrowed from the [Performance & Request Waterfalls guide](../request-waterfalls.md): +Sometimes we want to prefetch conditionally, based on the result of another fetch. Consider this example borrowed from the [Performance & Request Waterfalls guide](./request-waterfalls.md): [//]: # 'ExampleConditionally1' @@ -367,9 +367,9 @@ There is a tradeoff however, in that the code for `getGraphDataById` is now incl Because data fetching in the component tree itself can easily lead to request waterfalls and the different fixes for that can be cumbersome as they accumulate throughout the application, an attractive way to do prefetching is integrating it at the router level. -In this approach, you explicitly declare for each _route_ what data is going to be needed for that component tree, ahead of time. Because Server Rendering has traditionally needed all data to be loaded before rendering starts, this has been the dominating approach for SSR'd apps for a long time. This is still a common approach and you can read more about it in the [Server Rendering & Hydration guide](../ssr.md). +In this approach, you explicitly declare for each _route_ what data is going to be needed for that component tree, ahead of time. Because Server Rendering has traditionally needed all data to be loaded before rendering starts, this has been the dominating approach for SSR'd apps for a long time. This is still a common approach and you can read more about it in the [Server Rendering & Hydration guide](./ssr.md). -For now, let's focus on the client side case and look at an example of how you can make this work with [Tanstack Router](https://tanstack.com/router). These examples leave out a lot of setup and boilerplate to stay concise, you can check out a [full React Query example](../examples/basic-react-query-file-based) over in the [Tanstack Router docs](https://tanstack.com/router/latest/docs). +For now, let's focus on the client side case and look at an example of how you can make this work with [Tanstack Router](https://tanstack.com/router). These examples leave out a lot of setup and boilerplate to stay concise, you can check out a [full React Query example](./examples/basic-react-query-file-based) over in the [Tanstack Router docs](https://tanstack.com/router/latest/docs). When integrating at the router level, you can choose to either _block_ rendering of that route until all data is present, or you can start a prefetch but not await the result. That way, you can start rendering the route as soon as possible. You can also mix these two approaches and await some critical data, but start rendering before all the secondary data has finished loading. In this example, we'll configure an `/article` route to not render until the article data has finished loading, as well as start prefetching comments as soon as possible, but not block rendering the route if comments haven't finished loading yet. @@ -412,13 +412,13 @@ const articleRoute = new Route({ }) ``` -Integration with other routers is also possible, see the [react-router](../../examples/react-router) for another demonstration. +Integration with other routers is also possible, see the [react-router](../examples/react-router) for another demonstration. [//]: # 'Router' ## Manually Priming a Query -If you already have the data for your query synchronously available, you don't need to prefetch it. You can just use the [Query Client's `setQueryData` method](../../../../reference/QueryClient.md#queryclientsetquerydata) to directly add or update a query's cached result by key. +If you already have the data for your query synchronously available, you don't need to prefetch it. You can just use the [Query Client's `setQueryData` method](../../../reference/QueryClient.md#queryclientsetquerydata) to directly add or update a query's cached result by key. [//]: # 'ExampleManualPriming' @@ -433,6 +433,6 @@ queryClient.setQueryData(['todos'], todos) For a deep-dive on how to get data into your Query Cache before you fetch, see the [article Seeding the Query Cache by TkDodo](https://tkdodo.eu/blog/seeding-the-query-cache). -Integrating with Server Side routers and frameworks is very similar to what we just saw, with the addition that the data has to passed from the server to the client to be hydrated into the cache there. To learn how, continue on to the [Server Rendering & Hydration guide](../ssr.md). +Integrating with Server Side routers and frameworks is very similar to what we just saw, with the addition that the data has to passed from the server to the client to be hydrated into the cache there. To learn how, continue on to the [Server Rendering & Hydration guide](./ssr.md). [//]: # 'Materials' diff --git a/docs/framework/react/guides/queries.md b/docs/framework/react/guides/queries.md index f255483a87..de961063cb 100644 --- a/docs/framework/react/guides/queries.md +++ b/docs/framework/react/guides/queries.md @@ -5,7 +5,7 @@ title: Queries ## Query Basics -A query is a declarative dependency on an asynchronous source of data that is tied to a **unique key**. A query can be used with any Promise based method (including GET and POST methods) to fetch data from a server. If your method modifies data on the server, we recommend using [Mutations](../mutations.md) instead. +A query is a declarative dependency on an asynchronous source of data that is tied to a **unique key**. A query can be used with any Promise based method (including GET and POST methods) to fetch data from a server. If your method modifies data on the server, we recommend using [Mutations](./mutations.md) instead. To subscribe to a query in your components or custom hooks, call the `useQuery` hook with at least: @@ -121,7 +121,7 @@ TypeScript will also narrow the type of `data` correctly if you've checked for ` In addition to the `status` field, you will also get an additional `fetchStatus` property with the following options: - `fetchStatus === 'fetching'` - The query is currently fetching. -- `fetchStatus === 'paused'` - The query wanted to fetch, but it is paused. Read more about this in the [Network Mode](../network-mode.md) guide. +- `fetchStatus === 'paused'` - The query wanted to fetch, but it is paused. Read more about this in the [Network Mode](./network-mode.md) guide. - `fetchStatus === 'idle'` - The query is not doing anything at the moment. ### Why two different states? diff --git a/docs/framework/react/guides/query-functions.md b/docs/framework/react/guides/query-functions.md index 7cd0aa7209..4fa621c697 100644 --- a/docs/framework/react/guides/query-functions.md +++ b/docs/framework/react/guides/query-functions.md @@ -99,15 +99,15 @@ function fetchTodoList({ queryKey }) { The `QueryFunctionContext` is the object passed to each query function. It consists of: -- `queryKey: QueryKey`: [Query Keys](../query-keys.md) -- `client: QueryClient`: [QueryClient](../../../../reference/QueryClient.md) +- `queryKey: QueryKey`: [Query Keys](./query-keys.md) +- `client: QueryClient`: [QueryClient](../../../reference/QueryClient.md) - `signal?: AbortSignal` - [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) instance provided by TanStack Query - - Can be used for [Query Cancellation](../query-cancellation.md) + - Can be used for [Query Cancellation](./query-cancellation.md) - `meta: Record | undefined` - an optional field you can fill with additional information about your query -Additionally, [Infinite Queries](../infinite-queries.md) get the following options passed: +Additionally, [Infinite Queries](./infinite-queries.md) get the following options passed: - `pageParam: TPageParam` - the page parameter used to fetch the current page diff --git a/docs/framework/react/guides/query-invalidation.md b/docs/framework/react/guides/query-invalidation.md index 41a0fe50ab..3981b4d221 100644 --- a/docs/framework/react/guides/query-invalidation.md +++ b/docs/framework/react/guides/query-invalidation.md @@ -25,7 +25,7 @@ When a query is invalidated with `invalidateQueries`, two things happen: ## Query Matching with `invalidateQueries` -When using APIs like `invalidateQueries` and `removeQueries` (and others that support partial query matching), you can match multiple queries by their prefix, or get really specific and match an exact query. For information on the types of filters you can use, please see [Query Filters](../filters.md#query-filters). +When using APIs like `invalidateQueries` and `removeQueries` (and others that support partial query matching), you can match multiple queries by their prefix, or get really specific and match an exact query. For information on the types of filters you can use, please see [Query Filters](./filters.md#query-filters). In this example, we can use the `todos` prefix to invalidate any queries that start with `todos` in their query key: diff --git a/docs/framework/react/guides/query-keys.md b/docs/framework/react/guides/query-keys.md index f21c87c62a..7451738dae 100644 --- a/docs/framework/react/guides/query-keys.md +++ b/docs/framework/react/guides/query-keys.md @@ -91,13 +91,13 @@ function Todos({ todoId }) { [//]: # 'Example5' -Note that query keys act as dependencies for your query functions. Adding dependent variables to your query key will ensure that queries are cached independently, and that any time a variable changes, _queries will be refetched automatically_ (depending on your `staleTime` settings). See the [exhaustive-deps](../../../../eslint/exhaustive-deps.md) section for more information and examples. +Note that query keys act as dependencies for your query functions. Adding dependent variables to your query key will ensure that queries are cached independently, and that any time a variable changes, _queries will be refetched automatically_ (depending on your `staleTime` settings). See the [exhaustive-deps](../../../eslint/exhaustive-deps.md) section for more information and examples. [//]: # 'Materials' ## Further reading For tips on organizing Query Keys in larger applications, have a look at [Effective React Query Keys](https://tkdodo.eu/blog/effective-react-query-keys) and check the [Query Key Factory Package](https://github.com/lukemorales/query-key-factory) from -the [Community Resources](../../../../community-resources). +the [Community Resources](../../../community-resources). [//]: # 'Materials' diff --git a/docs/framework/react/guides/query-options.md b/docs/framework/react/guides/query-options.md index d66911a67f..03ee5d14e1 100644 --- a/docs/framework/react/guides/query-options.md +++ b/docs/framework/react/guides/query-options.md @@ -3,7 +3,7 @@ id: query-options title: Query Options --- -One of the best ways to share `queryKey` and `queryFn` between multiple places, yet keep them co-located to one another, is to use the `queryOptions` helper. At runtime, this helper just returns whatever you pass into it, but it has a lot of advantages when using it [with TypeScript](../../typescript.md#typing-query-options). You can define all possible options for a query in one place, and you'll also get type inference and type safety for all of them. +One of the best ways to share `queryKey` and `queryFn` between multiple places, yet keep them co-located to one another, is to use the `queryOptions` helper. At runtime, this helper just returns whatever you pass into it, but it has a lot of advantages when using it [with TypeScript](../typescript.md#typing-query-options). You can define all possible options for a query in one place, and you'll also get type inference and type safety for all of them. [//]: # 'Example1' @@ -31,9 +31,9 @@ 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/infiniteQueryOptions.md) helper is available. -You can still override some options at the component level. A very common and useful pattern is to create per-component [`select`](../render-optimizations.md#select) functions: +You can still override some options at the component level. A very common and useful pattern is to create per-component [`select`](./render-optimizations.md#select) functions: [//]: # 'Example2' diff --git a/docs/framework/react/guides/render-optimizations.md b/docs/framework/react/guides/render-optimizations.md index 4d7ac243bf..9edf7a467e 100644 --- a/docs/framework/react/guides/render-optimizations.md +++ b/docs/framework/react/guides/render-optimizations.md @@ -21,7 +21,7 @@ React Query will only trigger a re-render if one of the properties returned from You can customize this feature by setting `notifyOnChangeProps` manually globally or on a per-query basis. If you want to turn that feature off, you can set `notifyOnChangeProps: 'all'`. -> Note: The get trap of a proxy is invoked by accessing a property, either via destructuring or by accessing it directly. If you use object rest destructuring, you will disable this optimization. We have a [lint rule](../../../../eslint/no-rest-destructuring.md) to guard against this pitfall. +> Note: The get trap of a proxy is invoked by accessing a property, either via destructuring or by accessing it directly. If you use object rest destructuring, you will disable this optimization. We have a [lint rule](../../../eslint/no-rest-destructuring.md) to guard against this pitfall. ## select diff --git a/docs/framework/react/guides/request-waterfalls.md b/docs/framework/react/guides/request-waterfalls.md index e4e45a33fa..aaa350a0e7 100644 --- a/docs/framework/react/guides/request-waterfalls.md +++ b/docs/framework/react/guides/request-waterfalls.md @@ -7,11 +7,11 @@ Application performance is a broad and complex area and while React Query can't The biggest performance footgun when using React Query, or indeed any data fetching library that lets you fetch data inside of components, is request waterfalls. The rest of this page will explain what they are, how you can spot them and how you can restructure your application or APIs to avoid them. -The [Prefetching & Router Integration guide](../prefetching.md) builds on this and teaches you how to prefetch data ahead of time when it's not possible or feasible to restructure your application or APIs. +The [Prefetching & Router Integration guide](./prefetching.md) builds on this and teaches you how to prefetch data ahead of time when it's not possible or feasible to restructure your application or APIs. -The [Server Rendering & Hydration guide](../ssr.md) teaches you how to prefetch data on the server and pass that data down to the client so you don't have to fetch it again. +The [Server Rendering & Hydration guide](./ssr.md) teaches you how to prefetch data on the server and pass that data down to the client so you don't have to fetch it again. -The [Advanced Server Rendering guide](../advanced-ssr.md) further teaches you how to apply these patterns to Server Components and Streaming Server Rendering. +The [Advanced Server Rendering guide](./advanced-ssr.md) further teaches you how to apply these patterns to Server Components and Streaming Server Rendering. ## What is a Request Waterfall? @@ -65,7 +65,7 @@ With this as a basis, let's look at a few different patterns that can lead to Re ### Single Component Waterfalls / Serial Queries -When a single component first fetches one query, and then another, that's a request waterfall. This can happen when the second query is a [Dependent Query](../dependent-queries.md), that is, it depends on data from the first query when fetching: +When a single component first fetches one query, and then another, that's a request waterfall. This can happen when the second query is a [Dependent Query](./dependent-queries.md), that is, it depends on data from the first query when fetching: ```tsx // Get the user @@ -91,7 +91,7 @@ const { While not always feasible, for optimal performance it's better to restructure your API so you can fetch both of these in a single query. In the example above, instead of first fetching `getUserByEmail` to be able to `getProjectsByUser`, introducing a new `getProjectsByUserEmail` query would flatten the waterfall. -> Another way to mitigate dependent queries without restructuring your API is to move the waterfall to the server where latency is lower. This is the idea behind Server Components which are covered in the [Advanced Server Rendering guide](../advanced-ssr.md). +> Another way to mitigate dependent queries without restructuring your API is to move the waterfall to the server where latency is lower. This is the idea behind Server Components which are covered in the [Advanced Server Rendering guide](./advanced-ssr.md). Another example of serial queries is when you use React Query with Suspense: @@ -195,7 +195,7 @@ function Article({ id }) { The two queries will now fetch in parallel. Note that if you are using suspense, you'd want to combine these two queries into a single `useSuspenseQueries` instead. -Another way to flatten this waterfall would be to prefetch the comments in the `
` component, or prefetch both of these queries at the router level on page load or page navigation, read more about this in the [Prefetching & Router Integration guide](../prefetching.md). +Another way to flatten this waterfall would be to prefetch the comments in the `
` component, or prefetch both of these queries at the router level on page load or page navigation, read more about this in the [Prefetching & Router Integration guide](./prefetching.md). Next, let's look at a _Dependent Nested Component Waterfall_. @@ -240,7 +240,7 @@ The second query `getGraphDataById` is dependent on its parent in two different 2. |> getGraphDataById() ``` -In this example, we can't trivially flatten the waterfall by just hoisting the query to the parent, or even adding prefetching. Just like the dependent query example at the beginning of this guide, one option is to refactor our API to include the graph data in the `getFeed` query. Another more advanced solution is to leverage Server Components to move the waterfall to the server where latency is lower (read more about this in the [Advanced Server Rendering guide](../advanced-ssr.md)) but note that this can be a very big architectural change. +In this example, we can't trivially flatten the waterfall by just hoisting the query to the parent, or even adding prefetching. Just like the dependent query example at the beginning of this guide, one option is to refactor our API to include the graph data in the `getFeed` query. Another more advanced solution is to leverage Server Components to move the waterfall to the server where latency is lower (read more about this in the [Advanced Server Rendering guide](./advanced-ssr.md)) but note that this can be a very big architectural change. You can have good performance even with a few query waterfalls here and there, just know they are a common performance concern and be mindful about them. An especially insidious version is when Code Splitting is involved, let's take a look at this next. @@ -307,7 +307,7 @@ But that's just looking at the code from the example, if we consider what the fi 5. |> getGraphDataById() ``` -Note that this looks a bit different when server rendering, we will explore that further in the [Server Rendering & Hydration guide](../ssr.md). Also note that it's not uncommon for the route that contains `` to also be code split, which could add yet another hop. +Note that this looks a bit different when server rendering, we will explore that further in the [Server Rendering & Hydration guide](./ssr.md). Also note that it's not uncommon for the route that contains `` to also be code split, which could add yet another hop. In the code split case, it might actually help to hoist the `getGraphDataById` query to the `` component and make it conditional, or add a conditional prefetch. That query could then be fetched in parallel with the code, turning the example part into this: @@ -317,14 +317,14 @@ In the code split case, it might actually help to hoist the `getGraphDataById` q 2. |> JS for ``` -This is very much a tradeoff however. You are now including the data fetching code for `getGraphDataById` in the same bundle as ``, so evaluate what is best for your case. Read more about how to do this in the [Prefetching & Router Integration guide](../prefetching.md). +This is very much a tradeoff however. You are now including the data fetching code for `getGraphDataById` in the same bundle as ``, so evaluate what is best for your case. Read more about how to do this in the [Prefetching & Router Integration guide](./prefetching.md). > The tradeoff between: > > - Include all data fetching code in the main bundle, even if we seldom use it > - Put the data fetching code in the code split bundle, but with a request waterfall > -> is not great and has been one of the motivations for Server Components. With Server Components, it's possible to avoid both, read more about how this applies to React Query in the [Advanced Server Rendering guide](../advanced-ssr.md). +> is not great and has been one of the motivations for Server Components. With Server Components, it's possible to avoid both, read more about how this applies to React Query in the [Advanced Server Rendering guide](./advanced-ssr.md). ## Summary and takeaways @@ -337,4 +337,4 @@ Request Waterfalls are a very common and complex performance concern with many t Because of this accidental complexity, it pays off to be mindful of waterfalls and regularly examine your application looking for them (a good way is to examine the Network tab every now and then!). You don't necessarily have to flatten them all to have good performance, but keep an eye out for the high impact ones. -In the next guide, we'll look at more ways to flatten waterfalls, by leveraging [Prefetching & Router Integration](../prefetching.md). +In the next guide, we'll look at more ways to flatten waterfalls, by leveraging [Prefetching & Router Integration](./prefetching.md). diff --git a/docs/framework/react/guides/ssr.md b/docs/framework/react/guides/ssr.md index 641c195919..b399f95c6c 100644 --- a/docs/framework/react/guides/ssr.md +++ b/docs/framework/react/guides/ssr.md @@ -5,9 +5,9 @@ title: Server Rendering & Hydration In this guide you'll learn how to use React Query with server rendering. -See the guide on [Prefetching & Router Integration](../prefetching.md) for some background. You might also want to check out the [Performance & Request Waterfalls guide](../request-waterfalls.md) before that. +See the guide on [Prefetching & Router Integration](./prefetching.md) for some background. You might also want to check out the [Performance & Request Waterfalls guide](./request-waterfalls.md) before that. -For advanced server rendering patterns, such as streaming, Server Components and the new Next.js app router, see the [Advanced Server Rendering guide](../advanced-ssr.md). +For advanced server rendering patterns, such as streaming, Server Components and the new Next.js app router, see the [Advanced Server Rendering guide](./advanced-ssr.md). If you just want to see some code, you can skip ahead to the [Full Next.js pages router example](#full-nextjs-pages-router-example) or the [Full Remix example](#full-remix-example) below. @@ -177,11 +177,11 @@ With just a little more setup, you can use a `queryClient` to prefetch queries d > An interesting detail is that there are actually _three_ `queryClient`s involved. The framework loaders are a form of "preloading" phase that happens before rendering, and this phase has its own `queryClient` that does the prefetching. The dehydrated result of this phase gets passed to **both** the server rendering process **and** the client rendering process which each has its own `queryClient`. This ensures they both start with the same data so they can return the same markup. -> Server Components are another form of "preloading" phase, that can also "preload" (pre-render) parts of a React component tree. Read more in the [Advanced Server Rendering guide](../advanced-ssr.md). +> Server Components are another form of "preloading" phase, that can also "preload" (pre-render) parts of a React component tree. Read more in the [Advanced Server Rendering guide](./advanced-ssr.md). ### Full Next.js pages router example -> For app router documentation, see the [Advanced Server Rendering guide](../advanced-ssr.md). +> For app router documentation, see the [Advanced Server Rendering guide](./advanced-ssr.md). Initial setup: @@ -386,7 +386,7 @@ With Remix, this is a little bit more involved, we recommend checking out the [u ## Prefetching dependent queries -Over in the Prefetching guide we learned how to [prefetch dependent queries](../prefetching.md#dependent-queries--code-splitting), but how do we do this in framework loaders? Consider the following code, taken from the [Dependent Queries guide](../dependent-queries.md): +Over in the Prefetching guide we learned how to [prefetch dependent queries](./prefetching.md#dependent-queries--code-splitting), but how do we do this in framework loaders? Consider the following code, taken from the [Dependent Queries guide](./dependent-queries.md): ```tsx // Get the user @@ -482,7 +482,7 @@ If you are using a custom SSR setup, you need to take care of this step yourself ## A note about request waterfalls -In the [Performance & Request Waterfalls guide](../request-waterfalls.md) we mentioned we would revisit how server rendering changes one of the more complex nested waterfalls. Check back for the [specific code example](../request-waterfalls#code-splitting), but as a refresher, we have a code split `` component inside a `` component. This only renders if the feed contains a graph item and both of these components fetches their own data. With client rendering, this leads to the following request waterfall: +In the [Performance & Request Waterfalls guide](./request-waterfalls.md) we mentioned we would revisit how server rendering changes one of the more complex nested waterfalls. Check back for the [specific code example](./request-waterfalls#code-splitting), but as a refresher, we have a code split `` component inside a `` component. This only renders if the feed contains a graph item and both of these components fetches their own data. With client rendering, this leads to the following request waterfall: ``` 1. |> Markup (without content) @@ -528,7 +528,7 @@ Modern frameworks often try to solve this by fetching the initial code and data 2. |> JS for ``` -This is much better, but if we want to improve this further we can flatten this to a single roundtrip with Server Components. Learn how in the [Advanced Server Rendering guide](../advanced-ssr.md). +This is much better, but if we want to improve this further we can flatten this to a single roundtrip with Server Components. Learn how in the [Advanced Server Rendering guide](./advanced-ssr.md). ## Tips, Tricks and Caveats @@ -546,9 +546,9 @@ 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/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. -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. +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. Alternatively, you can set a smaller `gcTime`. diff --git a/docs/framework/react/guides/suspense.md b/docs/framework/react/guides/suspense.md index 94d3c528e9..7e8e045661 100644 --- a/docs/framework/react/guides/suspense.md +++ b/docs/framework/react/guides/suspense.md @@ -5,12 +5,12 @@ title: Suspense React Query can also be used with React's Suspense for Data Fetching APIs. For this, we have dedicated hooks: -- [useSuspenseQuery](../../reference/useSuspenseQuery.md) -- [useSuspenseInfiniteQuery](../../reference/useSuspenseInfiniteQuery.md) -- [useSuspenseQueries](../../reference/useSuspenseQueries.md) +- [useSuspenseQuery](../reference/useSuspenseQuery.md) +- [useSuspenseInfiniteQuery](../reference/useSuspenseInfiniteQuery.md) +- [useSuspenseQueries](../reference/useSuspenseQueries.md) - Additionally, you can use the `useQuery().promise` and `React.use()` (Experimental) -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](../../examples/suspense) for more information on how to set up suspense mode. +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](../examples/suspense) for more information on how to set up suspense mode. If you want mutations to propagate errors to the nearest error boundary (similar to queries), you can set the `throwOnError` option to `true` as well. @@ -107,7 +107,7 @@ const App = () => { ## Fetch-on-render vs Render-as-you-fetch -Out of the box, React Query in `suspense` mode works really well as a **Fetch-on-render** solution with no additional configuration. This means that when your components attempt to mount, they will trigger query fetching and suspend, but only once you have imported them and mounted them. If you want to take it to the next level and implement a **Render-as-you-fetch** model, we recommend implementing [Prefetching](../prefetching.md) on routing callbacks and/or user interactions events to start loading queries before they are mounted and hopefully even before you start importing or mounting their parent components. +Out of the box, React Query in `suspense` mode works really well as a **Fetch-on-render** solution with no additional configuration. This means that when your components attempt to mount, they will trigger query fetching and suspend, but only once you have imported them and mounted them. If you want to take it to the next level and implement a **Render-as-you-fetch** model, we recommend implementing [Prefetching](./prefetching.md) on routing callbacks and/or user interactions events to start loading queries before they are mounted and hopefully even before you start importing or mounting their parent components. ## Suspense on the Server with streaming @@ -172,7 +172,7 @@ export function Providers(props: { children: React.ReactNode }) { } ``` -For more information, check out the [NextJs Suspense Streaming Example](../../examples/nextjs-suspense-streaming) and the [Advanced Rendering & Hydration](../advanced-ssr.md) guide. +For more information, check out the [NextJs Suspense Streaming Example](../examples/nextjs-suspense-streaming) and the [Advanced Rendering & Hydration](./advanced-ssr.md) guide. ## Using `useQuery().promise` and `React.use()` (Experimental) diff --git a/docs/framework/react/guides/updates-from-mutation-responses.md b/docs/framework/react/guides/updates-from-mutation-responses.md index 142b71bab8..f3a582805d 100644 --- a/docs/framework/react/guides/updates-from-mutation-responses.md +++ b/docs/framework/react/guides/updates-from-mutation-responses.md @@ -3,7 +3,7 @@ id: updates-from-mutation-responses title: Updates from Mutation Responses --- -When dealing with mutations that **update** objects on the server, it's common for the new object to be automatically returned in the response of the mutation. Instead of refetching any queries for that item and wasting a network call for data we already have, we can take advantage of the object returned by the mutation function and update the existing query with the new data immediately using the [Query Client's `setQueryData`](../../../../reference/QueryClient.md#queryclientsetquerydata) method: +When dealing with mutations that **update** objects on the server, it's common for the new object to be automatically returned in the response of the mutation. Instead of refetching any queries for that item and wasting a network call for data we already have, we can take advantage of the object returned by the mutation function and update the existing query with the new data immediately using the [Query Client's `setQueryData`](../../../reference/QueryClient.md#queryclientsetquerydata) method: [//]: # 'Example' diff --git a/docs/framework/react/installation.md b/docs/framework/react/installation.md index 4634816a46..f88d4227ca 100644 --- a/docs/framework/react/installation.md +++ b/docs/framework/react/installation.md @@ -33,7 +33,7 @@ bun add @tanstack/react-query React Query is compatible with React v18+ and works with ReactDOM and React Native. -> Wanna give it a spin before you download? Try out the [simple](../examples/simple) or [basic](../examples/basic) examples! +> Wanna give it a spin before you download? Try out the [simple](./examples/simple) or [basic](./examples/basic) examples! ### CDN @@ -66,7 +66,7 @@ Opera >= 77 ### Recommendations -It is recommended to also use our [ESLint Plugin Query](../../../eslint/eslint-plugin-query.md) to help you catch bugs and inconsistencies while you code. You can install it via: +It is recommended to also use our [ESLint Plugin Query](../../eslint/eslint-plugin-query.md) to help you catch bugs and inconsistencies while you code. You can install it via: ```bash npm i -D @tanstack/eslint-plugin-query diff --git a/docs/framework/react/overview.md b/docs/framework/react/overview.md index 977814c89d..6c9a3f0dac 100644 --- a/docs/framework/react/overview.md +++ b/docs/framework/react/overview.md @@ -96,7 +96,7 @@ function Example() { ## You talked me into it, so what now? - Consider taking the official [TanStack Query Course](https://query.gg?s=tanstack) (or buying it for your whole team!) -- Learn TanStack Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation.md) and [API Reference](../reference/useQuery.md) +- Learn TanStack Query at your own pace with our amazingly thorough [Walkthrough Guide](./installation.md) and [API Reference](./reference/useQuery.md) - See the Article [Why You Want React Query](https://tkdodo.eu/blog/why-you-want-react-query). [//]: # 'Materials' diff --git a/docs/framework/react/plugins/createAsyncStoragePersister.md b/docs/framework/react/plugins/createAsyncStoragePersister.md index 0b7348493a..671ac3a467 100644 --- a/docs/framework/react/plugins/createAsyncStoragePersister.md +++ b/docs/framework/react/plugins/createAsyncStoragePersister.md @@ -35,7 +35,7 @@ bun add @tanstack/query-async-storage-persister @tanstack/react-query-persist-cl - Create a new asyncStoragePersister - you can pass any `storage` to it that adheres to the `AsyncStorage` interface - the example below uses the async-storage from React Native. - storages that read and write synchronously, like `window.localstorage`, also adhere to the `AsyncStorage` interface and can therefore also be used with `createAsyncStoragePersister`. -- Wrap your app by using [`PersistQueryClientProvider`](../persistQueryClient.md#persistqueryclientprovider) component. +- Wrap your app by using [`PersistQueryClientProvider`](./persistQueryClient.md#persistqueryclientprovider) component. ```tsx import AsyncStorage from '@react-native-async-storage/async-storage' @@ -69,7 +69,7 @@ export default Root ## Retries -Retries work the same as for a [SyncStoragePersister](../createSyncStoragePersister.md), except that they can also be asynchronous. You can also use all the predefined retry handlers. +Retries work the same as for a [SyncStoragePersister](./createSyncStoragePersister.md), except that they can also be asynchronous. You can also use all the predefined retry handlers. ## API diff --git a/docs/framework/react/plugins/createSyncStoragePersister.md b/docs/framework/react/plugins/createSyncStoragePersister.md index 0c340bdd50..e14e8e5712 100644 --- a/docs/framework/react/plugins/createSyncStoragePersister.md +++ b/docs/framework/react/plugins/createSyncStoragePersister.md @@ -6,7 +6,7 @@ title: createSyncStoragePersister ## Deprecated This plugin is deprecated and will be removed in the next major version. -You can simply use ['@tanstack/query-async-storage-persister'](../createAsyncStoragePersister.md) instead. +You can simply use ['@tanstack/query-async-storage-persister'](./createAsyncStoragePersister.md) instead. ## Installation @@ -38,7 +38,7 @@ bun add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-cli - Import the `createSyncStoragePersister` function - Create a new syncStoragePersister -- Pass it to the [`persistQueryClient`](../persistQueryClient.md) function +- Pass it to the [`persistQueryClient`](./persistQueryClient.md) function ```tsx import { persistQueryClient } from '@tanstack/react-query-persist-client' diff --git a/docs/framework/react/plugins/persistQueryClient.md b/docs/framework/react/plugins/persistQueryClient.md index 98ccf76cf5..d5562e65d0 100644 --- a/docs/framework/react/plugins/persistQueryClient.md +++ b/docs/framework/react/plugins/persistQueryClient.md @@ -7,8 +7,8 @@ This is set of utilities for interacting with "persisters" which save your query ## Build Persisters -- [createSyncStoragePersister](../createSyncStoragePersister.md) -- [createAsyncStoragePersister](../createAsyncStoragePersister.md) +- [createSyncStoragePersister](./createSyncStoragePersister.md) +- [createAsyncStoragePersister](./createAsyncStoragePersister.md) - [create a custom persister](#persisters) ## How It Works @@ -21,7 +21,7 @@ It should be set as the same value or higher than persistQueryClient's `maxAge` You can also pass it `Infinity` to disable garbage collection behavior entirely. -Due to a JavaScript limitation, the maximum allowed `gcTime` is about [24 days](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value), although it is possible to work around this limit using [timeoutManager.setTimeoutProvider](../../../../reference/timeoutManager.md#timeoutmanagersettimeoutprovider). +Due to a JavaScript limitation, the maximum allowed `gcTime` is about [24 days](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value), although it is possible to work around this limit using [timeoutManager.setTimeoutProvider](../../../reference/timeoutManager.md#timeoutmanagersettimeoutprovider). ```tsx const queryClient = new QueryClient({ @@ -58,7 +58,7 @@ the persister `removeClient()` is called and the cache is immediately discarded. ### `persistQueryClientSave` -- Your query/mutation are [`dehydrated`](../../reference/hydration.md#dehydrate) and stored by the persister you provided. +- Your query/mutation are [`dehydrated`](../reference/hydration.md#dehydrate) and stored by the persister you provided. - `createSyncStoragePersister` and `createAsyncStoragePersister` throttle this action to happen at most every 1 second to save on potentially expensive writes. Review their documentation to see how to customize their throttle timing. You can use this to explicitly persist the cache at the moment(s) you choose. @@ -90,7 +90,7 @@ persistQueryClientSubscribe({ ### `persistQueryClientRestore` -- Attempts to [`hydrate`](../../reference/hydration.md#hydrate) a previously persisted dehydrated query/mutation cache from the persister back into the query cache of the passed query client. +- Attempts to [`hydrate`](../reference/hydration.md#hydrate) a previously persisted dehydrated query/mutation cache from the persister back into the query cache of the passed query client. - If a cache is found that is older than the `maxAge` (which by default is 24 hours), it will be discarded. This timing can be customized as you see fit. You can use this to restore the cache at moment(s) you choose. @@ -180,7 +180,7 @@ ReactDOM.createRoot(rootElement).render() ### PersistQueryClientProvider -For this use-case, you can use the `PersistQueryClientProvider`. It will make sure to subscribe / unsubscribe correctly according to the React component lifecycle, and it will also make sure that queries will not start fetching while we are still restoring. Queries will still render though, they will just be put into `fetchingState: 'idle'` until data has been restored. Then, they will refetch unless the restored data is _fresh_ enough, and _initialData_ will also be respected. It can be used _instead of_ the normal [QueryClientProvider](../../reference/QueryClientProvider.md): +For this use-case, you can use the `PersistQueryClientProvider`. It will make sure to subscribe / unsubscribe correctly according to the React component lifecycle, and it will also make sure that queries will not start fetching while we are still restoring. Queries will still render though, they will just be put into `fetchingState: 'idle'` until data has been restored. Then, they will refetch unless the restored data is _fresh_ enough, and _initialData_ will also be respected. It can be used _instead of_ the normal [QueryClientProvider](../reference/QueryClientProvider.md): ```tsx import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client' @@ -210,14 +210,14 @@ ReactDOM.createRoot(rootElement).render( #### Props -`PersistQueryClientProvider` takes the same props as [QueryClientProvider](../../reference/QueryClientProvider.md), and additionally: +`PersistQueryClientProvider` takes the same props as [QueryClientProvider](../reference/QueryClientProvider.md), and additionally: - `persistOptions: PersistQueryClientOptions` - all [options](#options) you can pass to [persistQueryClient](#persistqueryclient) minus the QueryClient itself - `onSuccess?: () => Promise | unknown` - optional - will be called when the initial restore is finished - - can be used to [resumePausedMutations](../../../../reference/QueryClient.md#queryclientresumepausedmutations) + - can be used to [resumePausedMutations](../../../reference/QueryClient.md#queryclientresumepausedmutations) - if a Promise is returned, it will be awaited; restoring is seen as ongoing until then - `onError?: () => Promise | unknown` - optional diff --git a/docs/framework/react/quick-start.md b/docs/framework/react/quick-start.md index 645d092e68..d0834500ee 100644 --- a/docs/framework/react/quick-start.md +++ b/docs/framework/react/quick-start.md @@ -5,13 +5,13 @@ title: Quick Start This code snippet very briefly illustrates the 3 core concepts of React Query: -- [Queries](../guides/queries.md) -- [Mutations](../guides/mutations.md) -- [Query Invalidation](../guides/query-invalidation.md) +- [Queries](./guides/queries.md) +- [Mutations](./guides/mutations.md) +- [Query Invalidation](./guides/query-invalidation.md) [//]: # 'Example' -If you're looking for a fully functioning example, please have a look at our [simple StackBlitz example](../examples/simple) +If you're looking for a fully functioning example, please have a look at our [simple StackBlitz example](./examples/simple) ```tsx import { diff --git a/docs/framework/react/reference/infiniteQueryOptions.md b/docs/framework/react/reference/infiniteQueryOptions.md index 76b123253f..743f99438a 100644 --- a/docs/framework/react/reference/infiniteQueryOptions.md +++ b/docs/framework/react/reference/infiniteQueryOptions.md @@ -12,10 +12,10 @@ infiniteQueryOptions({ **Options** -You can generally pass everything to `infiniteQueryOptions` that you can also pass to [`useInfiniteQuery`](../useInfiniteQuery.md). Some options will have no effect when then forwarded to a function like `queryClient.prefetchInfiniteQuery`, but TypeScript will still be fine with those excess properties. +You can generally pass everything to `infiniteQueryOptions` that you can also pass to [`useInfiniteQuery`](./useInfiniteQuery.md). Some options will have no effect when then forwarded to a function like `queryClient.prefetchInfiniteQuery`, but TypeScript will still be fine with those excess properties. - `queryKey: QueryKey` - **Required** - The query key to generate options for. -See [useInfiniteQuery](../useInfiniteQuery.md) for more information. +See [useInfiniteQuery](./useInfiniteQuery.md) for more information. diff --git a/docs/framework/react/reference/mutationOptions.md b/docs/framework/react/reference/mutationOptions.md index 6e1a6c9bdc..0fa145a890 100644 --- a/docs/framework/react/reference/mutationOptions.md +++ b/docs/framework/react/reference/mutationOptions.md @@ -12,4 +12,4 @@ mutationOptions({ **Options** -You can generally pass everything to `mutationOptions` that you can also pass to [`useMutation`](../useMutation.md). +You can generally pass everything to `mutationOptions` that you can also pass to [`useMutation`](./useMutation.md). diff --git a/docs/framework/react/reference/queryOptions.md b/docs/framework/react/reference/queryOptions.md index c5360510fb..b6c5409372 100644 --- a/docs/framework/react/reference/queryOptions.md +++ b/docs/framework/react/reference/queryOptions.md @@ -12,7 +12,7 @@ queryOptions({ **Options** -You can generally pass everything to `queryOptions` that you can also pass to [`useQuery`](../useQuery.md). Some options will have no effect when then forwarded to a function like `queryClient.prefetchQuery`, but TypeScript will still be fine with those excess properties. +You can generally pass everything to `queryOptions` that you can also pass to [`useQuery`](./useQuery.md). Some options will have no effect when then forwarded to a function like `queryClient.prefetchQuery`, but TypeScript will still be fine with those excess properties. - `queryKey: QueryKey` - **Required** diff --git a/docs/framework/react/reference/useInfiniteQuery.md b/docs/framework/react/reference/useInfiniteQuery.md index 212ec619c8..ebc7666dfc 100644 --- a/docs/framework/react/reference/useInfiniteQuery.md +++ b/docs/framework/react/reference/useInfiniteQuery.md @@ -27,12 +27,12 @@ const { **Options** -The options for `useInfiniteQuery` are identical to the [`useQuery` hook](../../reference/useQuery.md) with the addition of the following: +The options for `useInfiniteQuery` are identical to the [`useQuery` hook](../reference/useQuery.md) with the addition of the following: - `queryFn: (context: QueryFunctionContext) => Promise` - - **Required, but only if no default query function has been defined** [`defaultQueryFn`](../../guides/default-query-function.md) + - **Required, but only if no default query function has been defined** [`defaultQueryFn`](../guides/default-query-function.md) - The function that the query will use to request data. - - Receives a [QueryFunctionContext](../../guides/query-functions.md#queryfunctioncontext) + - Receives a [QueryFunctionContext](../guides/query-functions.md#queryfunctioncontext) - Must return a promise that will either resolve data or throw an error. - `initialPageParam: TPageParam` - **Required** @@ -55,7 +55,7 @@ The options for `useInfiniteQuery` are identical to the [`useQuery` hook](../../ **Returns** -The returned properties for `useInfiniteQuery` are identical to the [`useQuery` hook](../../reference/useQuery.md), with the addition of the following properties and a small difference in `isRefetching` and `isRefetchError`: +The returned properties for `useInfiniteQuery` are identical to the [`useQuery` hook](../reference/useQuery.md), with the addition of the following properties and a small difference in `isRefetching` and `isRefetchError`: - `data.pages: TData[]` - Array containing all pages. diff --git a/docs/framework/react/reference/useIsFetching.md b/docs/framework/react/reference/useIsFetching.md index cf6ed23173..a9f027fa54 100644 --- a/docs/framework/react/reference/useIsFetching.md +++ b/docs/framework/react/reference/useIsFetching.md @@ -15,7 +15,7 @@ const isFetchingPosts = useIsFetching({ queryKey: ['posts'] }) **Options** -- `filters?: QueryFilters`: [Query Filters](../../guides/filters.md#query-filters) +- `filters?: QueryFilters`: [Query Filters](../guides/filters.md#query-filters) - `queryClient?: QueryClient` - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used. diff --git a/docs/framework/react/reference/useIsMutating.md b/docs/framework/react/reference/useIsMutating.md index 0b6d3c003d..b43991c76c 100644 --- a/docs/framework/react/reference/useIsMutating.md +++ b/docs/framework/react/reference/useIsMutating.md @@ -15,7 +15,7 @@ const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] }) **Options** -- `filters?: MutationFilters`: [Mutation Filters](../../guides/filters.md#mutation-filters) +- `filters?: MutationFilters`: [Mutation Filters](../guides/filters.md#mutation-filters) - `queryClient?: QueryClient` - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used. diff --git a/docs/framework/react/reference/useMutation.md b/docs/framework/react/reference/useMutation.md index 889bf08423..adcd6bf9d0 100644 --- a/docs/framework/react/reference/useMutation.md +++ b/docs/framework/react/reference/useMutation.md @@ -56,14 +56,14 @@ mutate(variables, { - `gcTime: number | Infinity` - The time in milliseconds that unused/inactive cache data remains in memory. When a mutation's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different cache times are specified, the longest one will be used. - If set to `Infinity`, will disable garbage collection - - Note: the maximum allowed time is about [24 days](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value), although it is possible to work around this limit using [timeoutManager.setTimeoutProvider](../../../../reference/timeoutManager.md#timeoutmanagersettimeoutprovider). + - Note: the maximum allowed time is about [24 days](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value), although it is possible to work around this limit using [timeoutManager.setTimeoutProvider](../../../reference/timeoutManager.md#timeoutmanagersettimeoutprovider). - `mutationKey: unknown[]` - Optional - A mutation key can be set to inherit defaults set with `queryClient.setMutationDefaults`. - `networkMode: 'online' | 'always' | 'offlineFirst'` - Optional - defaults to `'online'` - - see [Network Mode](../../guides/network-mode.md) for more information. + - see [Network Mode](../guides/network-mode.md) for more information. - `onMutate: (variables: TVariables) => Promise | TOnMutateResult | void` - Optional - This function will fire before the mutation function is fired and is passed the same variables the mutation function would receive @@ -138,7 +138,7 @@ mutate(variables, { - `isIdle`, `isPending`, `isSuccess`, `isError`: boolean variables derived from `status` - `isPaused: boolean` - will be `true` if the mutation has been `paused` - - see [Network Mode](../../guides/network-mode.md) for more information. + - see [Network Mode](../guides/network-mode.md) for more information. - `data: undefined | unknown` - Defaults to `undefined` - The last successfully resolved data for the mutation. diff --git a/docs/framework/react/reference/useMutationState.md b/docs/framework/react/reference/useMutationState.md index 53d6d6dae8..60ee59e92f 100644 --- a/docs/framework/react/reference/useMutationState.md +++ b/docs/framework/react/reference/useMutationState.md @@ -69,7 +69,7 @@ const latest = data[data.length - 1] **Options** - `options` - - `filters?: MutationFilters`: [Mutation Filters](../../guides/filters.md#mutation-filters) + - `filters?: MutationFilters`: [Mutation Filters](../guides/filters.md#mutation-filters) - `select?: (mutation: Mutation) => TResult` - Use this to transform the mutation state. - `queryClient?: QueryClient` diff --git a/docs/framework/react/reference/usePrefetchInfiniteQuery.md b/docs/framework/react/reference/usePrefetchInfiniteQuery.md index 58750ad131..1e86a35b55 100644 --- a/docs/framework/react/reference/usePrefetchInfiniteQuery.md +++ b/docs/framework/react/reference/usePrefetchInfiniteQuery.md @@ -9,14 +9,14 @@ usePrefetchInfiniteQuery(options) **Options** -You can pass everything to `usePrefetchInfiniteQuery` that you can pass to [`queryClient.prefetchInfiniteQuery`](../../../../reference/QueryClient.md#queryclientprefetchinfinitequery). Remember that some of them are required as below: +You can pass everything to `usePrefetchInfiniteQuery` that you can pass to [`queryClient.prefetchInfiniteQuery`](../../../reference/QueryClient.md#queryclientprefetchinfinitequery). Remember that some of them are required as below: - `queryKey: QueryKey` - **Required** - The query key to prefetch during render - `queryFn: (context: QueryFunctionContext) => Promise` - - **Required, but only if no default query function has been defined** See [Default Query Function](../../guides/default-query-function.md) for more information. + - **Required, but only if no default query function has been defined** See [Default Query Function](../guides/default-query-function.md) for more information. - `initialPageParam: TPageParam` - **Required** @@ -30,4 +30,4 @@ You can pass everything to `usePrefetchInfiniteQuery` that you can pass to [`que - **Returns** -The `usePrefetchInfiniteQuery` does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses [`useSuspenseInfiniteQuery`](../useSuspenseInfiniteQuery.md) +The `usePrefetchInfiniteQuery` does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses [`useSuspenseInfiniteQuery`](./useSuspenseInfiniteQuery.md) diff --git a/docs/framework/react/reference/usePrefetchQuery.md b/docs/framework/react/reference/usePrefetchQuery.md index 89836bcb05..7feccad5fc 100644 --- a/docs/framework/react/reference/usePrefetchQuery.md +++ b/docs/framework/react/reference/usePrefetchQuery.md @@ -9,15 +9,15 @@ usePrefetchQuery(options) **Options** -You can pass everything to `usePrefetchQuery` that you can pass to [`queryClient.prefetchQuery`](../../../../reference/QueryClient.md#queryclientprefetchquery). Remember that some of them are required as below: +You can pass everything to `usePrefetchQuery` that you can pass to [`queryClient.prefetchQuery`](../../../reference/QueryClient.md#queryclientprefetchquery). Remember that some of them are required as below: - `queryKey: QueryKey` - **Required** - The query key to prefetch during render - `queryFn: (context: QueryFunctionContext) => Promise` - - **Required, but only if no default query function has been defined** See [Default Query Function](../../guides/default-query-function.md) for more information. + - **Required, but only if no default query function has been defined** See [Default Query Function](../guides/default-query-function.md) for more information. **Returns** -The `usePrefetchQuery` does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses [`useSuspenseQuery`](../useSuspenseQuery.md). +The `usePrefetchQuery` does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses [`useSuspenseQuery`](./useSuspenseQuery.md). diff --git a/docs/framework/react/reference/useQueries.md b/docs/framework/react/reference/useQueries.md index 41d423b2d5..d41a73a2b1 100644 --- a/docs/framework/react/reference/useQueries.md +++ b/docs/framework/react/reference/useQueries.md @@ -18,7 +18,7 @@ const results = useQueries({ **Options** -The `useQueries` hook accepts an options object with a **queries** key whose value is an array with query option objects identical to the [`useQuery` hook](../useQuery.md) (excluding the `queryClient` option - because the `QueryClient` can be passed in on the top level). +The `useQueries` hook accepts an options object with a **queries** key whose value is an array with query option objects identical to the [`useQuery` hook](./useQuery.md) (excluding the `queryClient` option - because the `QueryClient` can be passed in on the top level). - `queryClient?: QueryClient` - Use this to provide a custom QueryClient. Otherwise, the one from the nearest context will be used. diff --git a/docs/framework/react/reference/useQuery.md b/docs/framework/react/reference/useQuery.md index 54be8ac837..d3b10142a8 100644 --- a/docs/framework/react/reference/useQuery.md +++ b/docs/framework/react/reference/useQuery.md @@ -66,20 +66,20 @@ const { - `queryKey: unknown[]` - **Required** - The query key to use for this query. - - The query key will be hashed into a stable hash. See [Query Keys](../../guides/query-keys.md) for more information. + - The query key will be hashed into a stable hash. See [Query Keys](../guides/query-keys.md) for more information. - The query will automatically update when this key changes (as long as `enabled` is not set to `false`). - `queryFn: (context: QueryFunctionContext) => Promise` - - **Required, but only if no default query function has been defined** See [Default Query Function](../../guides/default-query-function.md) for more information. + - **Required, but only if no default query function has been defined** See [Default Query Function](../guides/default-query-function.md) for more information. - The function that the query will use to request data. - - Receives a [QueryFunctionContext](../../guides/query-functions.md#queryfunctioncontext) + - Receives a [QueryFunctionContext](../guides/query-functions.md#queryfunctioncontext) - Must return a promise that will either resolve data or throw an error. The data cannot be `undefined`. - `enabled: boolean | (query: Query) => boolean` - Set this to `false` to disable this query from automatically running. - - Can be used for [Dependent Queries](../../guides/dependent-queries.md). + - Can be used for [Dependent Queries](../guides/dependent-queries.md). - `networkMode: 'online' | 'always' | 'offlineFirst'` - optional - defaults to `'online'` - - see [Network Mode](../../guides/network-mode.md) for more information. + - see [Network Mode](../guides/network-mode.md) for more information. - `retry: boolean | number | (failureCount: number, error: TError) => boolean` - If `false`, failed queries will not retry by default. - If `true`, failed queries will retry infinitely. @@ -101,7 +101,7 @@ const { - `gcTime: number | Infinity` - Defaults to `5 * 60 * 1000` (5 minutes) or `Infinity` during SSR - The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used. - - Note: the maximum allowed time is about [24 days](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value), although it is possible to work around this limit using [timeoutManager.setTimeoutProvider](../../../../reference/timeoutManager.md#timeoutmanagersettimeoutprovider). + - Note: the maximum allowed time is about [24 days](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value), although it is possible to work around this limit using [timeoutManager.setTimeoutProvider](../../../reference/timeoutManager.md#timeoutmanagersettimeoutprovider). - If set to `Infinity`, will disable garbage collection - `queryKeyHashFn: (queryKey: QueryKey) => string` - Optional @@ -221,7 +221,7 @@ const { - `fetching`: Is `true` whenever the queryFn is executing, which includes initial `pending` as well as background refetches. - `paused`: The query wanted to fetch, but has been `paused`. - `idle`: The query is not fetching. - - see [Network Mode](../../guides/network-mode.md) for more information. + - see [Network Mode](../guides/network-mode.md) for more information. - `isFetching: boolean` - A derived boolean from the `fetchStatus` variable above, provided for convenience. - `isPaused: boolean` diff --git a/docs/framework/react/reference/useSuspenseInfiniteQuery.md b/docs/framework/react/reference/useSuspenseInfiniteQuery.md index 86ad90e7bf..605fbf8076 100644 --- a/docs/framework/react/reference/useSuspenseInfiniteQuery.md +++ b/docs/framework/react/reference/useSuspenseInfiniteQuery.md @@ -9,7 +9,7 @@ const result = useSuspenseInfiniteQuery(options) **Options** -The same as for [useInfiniteQuery](../useInfiniteQuery.md), except for: +The same as for [useInfiniteQuery](./useInfiniteQuery.md), except for: - `suspense` - `throwOnError` @@ -18,7 +18,7 @@ The same as for [useInfiniteQuery](../useInfiniteQuery.md), except for: **Returns** -Same object as [useInfiniteQuery](../useInfiniteQuery.md), except that: +Same object as [useInfiniteQuery](./useInfiniteQuery.md), except that: - `data` is guaranteed to be defined - `isPlaceholderData` is missing @@ -27,4 +27,4 @@ Same object as [useInfiniteQuery](../useInfiniteQuery.md), except that: **Caveat** -[Cancellation](../../guides/query-cancellation.md) does not work. +[Cancellation](../guides/query-cancellation.md) does not work. diff --git a/docs/framework/react/reference/useSuspenseQueries.md b/docs/framework/react/reference/useSuspenseQueries.md index 629d61aaa2..702d791ee4 100644 --- a/docs/framework/react/reference/useSuspenseQueries.md +++ b/docs/framework/react/reference/useSuspenseQueries.md @@ -9,7 +9,7 @@ const result = useSuspenseQueries(options) **Options** -The same as for [useQueries](../useQueries.md), except that each `query` can't have: +The same as for [useQueries](./useQueries.md), except that each `query` can't have: - `suspense` - `throwOnError` @@ -18,7 +18,7 @@ The same as for [useQueries](../useQueries.md), except that each `query` can't h **Returns** -Same structure as [useQueries](../useQueries.md), except that for each `query`: +Same structure as [useQueries](./useQueries.md), except that for each `query`: - `data` is guaranteed to be defined - `isPlaceholderData` is missing @@ -29,4 +29,4 @@ Same structure as [useQueries](../useQueries.md), except that for each `query`: Keep in mind that the component will only re-mount after **all queries** have finished loading. Hence, if a query has gone stale in the time it took for all the queries to complete, it will be fetched again at re-mount. To avoid this, make sure to set a high enough `staleTime`. -[Cancellation](../../guides/query-cancellation.md) does not work. +[Cancellation](../guides/query-cancellation.md) does not work. diff --git a/docs/framework/react/reference/useSuspenseQuery.md b/docs/framework/react/reference/useSuspenseQuery.md index 4eaee3ddf4..b531bca47d 100644 --- a/docs/framework/react/reference/useSuspenseQuery.md +++ b/docs/framework/react/reference/useSuspenseQuery.md @@ -9,7 +9,7 @@ const result = useSuspenseQuery(options) **Options** -The same as for [useQuery](../useQuery.md), except for: +The same as for [useQuery](./useQuery.md), except for: - `throwOnError` - `enabled` @@ -17,7 +17,7 @@ The same as for [useQuery](../useQuery.md), except for: **Returns** -Same object as [useQuery](../useQuery.md), except that: +Same object as [useQuery](./useQuery.md), except that: - `data` is guaranteed to be defined - `isPlaceholderData` is missing @@ -26,4 +26,4 @@ Same object as [useQuery](../useQuery.md), except that: **Caveat** -[Cancellation](../../guides/query-cancellation.md) does not work. +[Cancellation](../guides/query-cancellation.md) does not work. diff --git a/docs/framework/react/typescript.md b/docs/framework/react/typescript.md index 6407b9973b..7e8b93fe85 100644 --- a/docs/framework/react/typescript.md +++ b/docs/framework/react/typescript.md @@ -155,7 +155,7 @@ const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups }) ### Registering global Meta -Similarly to registering a [global error type](#registering-a-global-error) you can also register a global `Meta` type. This ensures the optional `meta` field on [queries](../reference/useQuery.md) and [mutations](../reference/useMutation.md) stays consistent and is type-safe. Note that the registered type must extend `Record` so that `meta` remains an object. +Similarly to registering a [global error type](#registering-a-global-error) you can also register a global `Meta` type. This ensures the optional `meta` field on [queries](./reference/useQuery.md) and [mutations](./reference/useMutation.md) stays consistent and is type-safe. Note that the registered type must extend `Record` so that `meta` remains an object. ```ts import '@tanstack/react-query' @@ -269,7 +269,7 @@ queryClient.isMutating(groupMutationOptions()) ## Typesafe disabling of queries using `skipToken` If you are using TypeScript, you can use the `skipToken` to disable a query. This is useful when you want to disable a query based on a condition, but you still want to keep the query to be type safe. -Read more about it in the [Disabling Queries](../guides/disabling-queries.md) guide. +Read more about it in the [Disabling Queries](./guides/disabling-queries.md) guide. [//]: # 'Materials' diff --git a/docs/framework/solid/guides/suspense.md b/docs/framework/solid/guides/suspense.md index 20d7a77bcc..48dbd0881c 100644 --- a/docs/framework/solid/guides/suspense.md +++ b/docs/framework/solid/guides/suspense.md @@ -38,4 +38,4 @@ function SuspendableComponent() { ## Fetch-on-render vs Render-as-you-fetch -Out of the box, Solid Query in `suspense` mode works really well as a **Fetch-on-render** solution with no additional configuration. This means that when your components attempt to mount, they will trigger query fetching and suspend, but only once you have imported them and mounted them. If you want to take it to the next level and implement a **Render-as-you-fetch** model, we recommend implementing [Prefetching](../prefetching) on routing callbacks and/or user interactions events to start loading queries before they are mounted and hopefully even before you start importing or mounting their parent components. +Out of the box, Solid Query in `suspense` mode works really well as a **Fetch-on-render** solution with no additional configuration. This means that when your components attempt to mount, they will trigger query fetching and suspend, but only once you have imported them and mounted them. If you want to take it to the next level and implement a **Render-as-you-fetch** model, we recommend implementing [Prefetching](./prefetching) on routing callbacks and/or user interactions events to start loading queries before they are mounted and hopefully even before you start importing or mounting their parent components. diff --git a/docs/framework/solid/installation.md b/docs/framework/solid/installation.md index 4186c36fe8..c5845c060a 100644 --- a/docs/framework/solid/installation.md +++ b/docs/framework/solid/installation.md @@ -31,7 +31,7 @@ or bun add @tanstack/solid-query ``` -> Wanna give it a spin before you download? Try out the [simple](../examples/simple) or [basic](../examples/basic) examples! +> Wanna give it a spin before you download? Try out the [simple](./examples/simple) or [basic](./examples/basic) examples! ### CDN diff --git a/docs/framework/solid/reference/useQuery.md b/docs/framework/solid/reference/useQuery.md index e3c042618a..38b9751d75 100644 --- a/docs/framework/solid/reference/useQuery.md +++ b/docs/framework/solid/reference/useQuery.md @@ -190,16 +190,16 @@ function App() { - ##### `queryKey: unknown[]` - **Required** - The query key to use for this query. - - The query key will be hashed into a stable hash. See [Query Keys](../../guides/query-keys.md) for more information. + - The query key will be hashed into a stable hash. See [Query Keys](../guides/query-keys.md) for more information. - The query will automatically update when this key changes (as long as `enabled` is not set to `false`). - ##### `queryFn: (context: QueryFunctionContext) => Promise` - - **Required, but only if no default query function has been defined** See [Default Query Function](../../guides/default-query-function.md) for more information. + - **Required, but only if no default query function has been defined** See [Default Query Function](../guides/default-query-function.md) for more information. - The function that the query will use to request data. - - Receives a [QueryFunctionContext](../../guides/query-functions.md#queryfunctioncontext) + - Receives a [QueryFunctionContext](../guides/query-functions.md#queryfunctioncontext) - Must return a promise that will either resolve data or throw an error. The data cannot be `undefined`. - ##### `enabled: boolean` - Set this to `false` to disable this query from automatically running. - - Can be used for [Dependent Queries](../../guides/dependent-queries.md) for more information. + - Can be used for [Dependent Queries](../guides/dependent-queries.md) for more information. - ##### `select: (data: TData) => unknown` - Optional - This option can be used to transform or select a part of the data returned by the query function. It affects the returned `data` value, but does not affect what gets stored in the query cache. @@ -223,12 +223,12 @@ function App() { - ##### `gcTime: number | Infinity` - Defaults to `5 * 60 * 1000` (5 minutes) or `Infinity` during SSR - The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used. - - Note: the maximum allowed time is about [24 days](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value), although it is possible to work around this limit using [timeoutManager.setTimeoutProvider](../../../../reference/timeoutManager.md#timeoutmanagersettimeoutprovider). + - Note: the maximum allowed time is about [24 days](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value), although it is possible to work around this limit using [timeoutManager.setTimeoutProvider](../../../reference/timeoutManager.md#timeoutmanagersettimeoutprovider). - If set to `Infinity`, will disable garbage collection - ##### `networkMode: 'online' | 'always' | 'offlineFirst'` - optional - defaults to `'online'` - - see [Network Mode](../../guides/network-mode.md) for more information. + - see [Network Mode](../guides/network-mode.md) for more information. - ##### `initialData: TData | () => TData` - Optional - If set, this value will be used as the initial data for the query cache (as long as the query hasn't been created or cached yet) @@ -341,7 +341,7 @@ function App() { - `fetching`: Is `true` whenever the queryFn is executing, which includes initial `pending` as well as background refetches. - `paused`: The query wanted to fetch, but has been `paused`. - `idle`: The query is not fetching. - - see [Network Mode](../../guides/network-mode.md) for more information. + - see [Network Mode](../guides/network-mode.md) for more information. - ##### `isFetching: boolean` - A derived boolean from the `fetchStatus` variable above, provided for convenience. - ##### `isPaused: boolean` diff --git a/docs/framework/solid/typescript.md b/docs/framework/solid/typescript.md index 67711cbabc..0fc2c2cfc4 100644 --- a/docs/framework/solid/typescript.md +++ b/docs/framework/solid/typescript.md @@ -154,7 +154,7 @@ query.error ## Registering global `Meta` -Similarly to registering a [global error type](#registering-a-global-error) you can also register a global `Meta` type. This ensures the optional `meta` field on [queries](../reference/useQuery.md) and [mutations](../reference/useMutation.md) stays consistent and is type-safe. Note that the registered type must extend `Record` so that `meta` remains an object. +Similarly to registering a [global error type](#registering-a-global-error) you can also register a global `Meta` type. This ensures the optional `meta` field on [queries](./reference/useQuery.md) and [mutations](./reference/useMutation.md) stays consistent and is type-safe. Note that the registered type must extend `Record` so that `meta` remains an object. ```ts import '@tanstack/solid-query' @@ -215,4 +215,4 @@ const data = queryClient.getQueryData(['groups']) If you are using TypeScript, you can use the `skipToken` to disable a query. This is useful when you want to disable a query based on a condition, but you still want to keep the query to be type safe. -Read more about it in the [Disabling Queries](../guides/disabling-queries.md) guide. +Read more about it in the [Disabling Queries](./guides/disabling-queries.md) guide. diff --git a/docs/framework/svelte/installation.md b/docs/framework/svelte/installation.md index 7fd45eb7df..7305162a11 100644 --- a/docs/framework/svelte/installation.md +++ b/docs/framework/svelte/installation.md @@ -29,4 +29,4 @@ or bun add @tanstack/svelte-query ``` -> Wanna give it a spin before you download? Try out the [basic](../examples/basic) example! +> Wanna give it a spin before you download? Try out the [basic](./examples/basic) example! diff --git a/docs/framework/svelte/overview.md b/docs/framework/svelte/overview.md index 28923e9d63..8be6de78d3 100644 --- a/docs/framework/svelte/overview.md +++ b/docs/framework/svelte/overview.md @@ -5,7 +5,7 @@ title: Overview The `@tanstack/svelte-query` package offers a 1st-class API for using TanStack Query via Svelte. -> Migrating from stores to the runes syntax? See the [migration guide](../migrate-from-v5-to-v6). +> Migrating from stores to the runes syntax? See the [migration guide](./migrate-from-v5-to-v6). ## Example @@ -51,7 +51,7 @@ Then call any function (e.g. createQuery) from any component: ## SvelteKit -If you are using SvelteKit, please have a look at [SSR & SvelteKit](../ssr). +If you are using SvelteKit, please have a look at [SSR & SvelteKit](./ssr). ## Available Functions diff --git a/docs/framework/svelte/reference/functions/createInfiniteQuery.md b/docs/framework/svelte/reference/functions/createInfiniteQuery.md index 646c692605..f04e2f9c72 100644 --- a/docs/framework/svelte/reference/functions/createInfiniteQuery.md +++ b/docs/framework/svelte/reference/functions/createInfiniteQuery.md @@ -37,12 +37,12 @@ Defined in: [packages/svelte-query/src/createInfiniteQuery.ts:16](https://github ### options -[`Accessor`](../../type-aliases/Accessor.md)\<[`CreateInfiniteQueryOptions`](../../type-aliases/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>\> +[`Accessor`](../type-aliases/Accessor.md)\<[`CreateInfiniteQueryOptions`](../type-aliases/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>\> ### queryClient? -[`Accessor`](../../type-aliases/Accessor.md)\<`QueryClient`\> +[`Accessor`](../type-aliases/Accessor.md)\<`QueryClient`\> ## Returns -[`CreateInfiniteQueryResult`](../../type-aliases/CreateInfiniteQueryResult.md)\<`TData`, `TError`\> +[`CreateInfiniteQueryResult`](../type-aliases/CreateInfiniteQueryResult.md)\<`TData`, `TError`\> diff --git a/docs/framework/svelte/reference/functions/createMutation.md b/docs/framework/svelte/reference/functions/createMutation.md index 41277997a9..9acaab3c06 100644 --- a/docs/framework/svelte/reference/functions/createMutation.md +++ b/docs/framework/svelte/reference/functions/createMutation.md @@ -33,16 +33,16 @@ Defined in: [packages/svelte-query/src/createMutation.svelte.ts:17](https://gith ### options -[`Accessor`](../../type-aliases/Accessor.md)\<[`CreateMutationOptions`](../../type-aliases/CreateMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TContext`\>\> +[`Accessor`](../type-aliases/Accessor.md)\<[`CreateMutationOptions`](../type-aliases/CreateMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TContext`\>\> A function that returns mutation options ### queryClient? -[`Accessor`](../../type-aliases/Accessor.md)\<`QueryClient`\> +[`Accessor`](../type-aliases/Accessor.md)\<`QueryClient`\> Custom query client which overrides provider ## Returns -[`CreateMutationResult`](../../type-aliases/CreateMutationResult.md)\<`TData`, `TError`, `TVariables`, `TContext`\> +[`CreateMutationResult`](../type-aliases/CreateMutationResult.md)\<`TData`, `TError`, `TVariables`, `TContext`\> diff --git a/docs/framework/svelte/reference/functions/createQueries.md b/docs/framework/svelte/reference/functions/createQueries.md index 219bb3f25e..b66be655a0 100644 --- a/docs/framework/svelte/reference/functions/createQueries.md +++ b/docs/framework/svelte/reference/functions/createQueries.md @@ -25,7 +25,7 @@ Defined in: [packages/svelte-query/src/createQueries.svelte.ts:189](https://gith ### createQueriesOptions -[`Accessor`](../../type-aliases/Accessor.md)\<\{ +[`Accessor`](../type-aliases/Accessor.md)\<\{ `combine?`: (`result`) => `TCombinedResult`; `queries`: \| readonly \[`T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GetCreateQueryOptionsForCreateQueries`\<`Head`\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetCreateQueryOptionsForCreateQueries`\<...\>, `GetCreateQueryOptionsForCreateQueries`\<...\>\] : \[`...(...)[]`\] *extends* \[..., `...(...)[]`\] ? ... *extends* ... ? ... : ... : ... *extends* ... ? ... : ... : readonly `unknown`[] *extends* `T` ? `T` : `T` *extends* `CreateQueryOptionsForCreateQueries`\<..., ..., ..., ...\>[] ? `CreateQueryOptionsForCreateQueries`\<..., ..., ..., ...\>[] : `CreateQueryOptionsForCreateQueries`\<..., ..., ..., ...\>[]\] \| readonly \[\{ \[K in string \| number \| symbol\]: GetCreateQueryOptionsForCreateQueries\\]\> \}\]; @@ -33,7 +33,7 @@ Defined in: [packages/svelte-query/src/createQueries.svelte.ts:189](https://gith ### queryClient? -[`Accessor`](../../type-aliases/Accessor.md)\<`QueryClient`\> +[`Accessor`](../type-aliases/Accessor.md)\<`QueryClient`\> ## Returns diff --git a/docs/framework/svelte/reference/functions/createQuery.md b/docs/framework/svelte/reference/functions/createQuery.md index 33d67e90a2..64b0441621 100644 --- a/docs/framework/svelte/reference/functions/createQuery.md +++ b/docs/framework/svelte/reference/functions/createQuery.md @@ -35,15 +35,15 @@ Defined in: [packages/svelte-query/src/createQuery.ts:15](https://github.com/Tan #### options -[`Accessor`](../../type-aliases/Accessor.md)\<[`UndefinedInitialDataOptions`](../../type-aliases/UndefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>\> +[`Accessor`](../type-aliases/Accessor.md)\<[`UndefinedInitialDataOptions`](../type-aliases/UndefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>\> #### queryClient? -[`Accessor`](../../type-aliases/Accessor.md)\<`QueryClient`\> +[`Accessor`](../type-aliases/Accessor.md)\<`QueryClient`\> ### Returns -[`CreateQueryResult`](../../type-aliases/CreateQueryResult.md)\<`TData`, `TError`\> +[`CreateQueryResult`](../type-aliases/CreateQueryResult.md)\<`TData`, `TError`\> ## Call Signature @@ -75,15 +75,15 @@ Defined in: [packages/svelte-query/src/createQuery.ts:27](https://github.com/Tan #### options -[`Accessor`](../../type-aliases/Accessor.md)\<[`DefinedInitialDataOptions`](../../type-aliases/DefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>\> +[`Accessor`](../type-aliases/Accessor.md)\<[`DefinedInitialDataOptions`](../type-aliases/DefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>\> #### queryClient? -[`Accessor`](../../type-aliases/Accessor.md)\<`QueryClient`\> +[`Accessor`](../type-aliases/Accessor.md)\<`QueryClient`\> ### Returns -[`DefinedCreateQueryResult`](../../type-aliases/DefinedCreateQueryResult.md)\<`TData`, `TError`\> +[`DefinedCreateQueryResult`](../type-aliases/DefinedCreateQueryResult.md)\<`TData`, `TError`\> ## Call Signature @@ -115,12 +115,12 @@ Defined in: [packages/svelte-query/src/createQuery.ts:39](https://github.com/Tan #### options -[`Accessor`](../../type-aliases/Accessor.md)\<[`CreateQueryOptions`](../../type-aliases/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>\> +[`Accessor`](../type-aliases/Accessor.md)\<[`CreateQueryOptions`](../type-aliases/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>\> #### queryClient? -[`Accessor`](../../type-aliases/Accessor.md)\<`QueryClient`\> +[`Accessor`](../type-aliases/Accessor.md)\<`QueryClient`\> ### Returns -[`CreateQueryResult`](../../type-aliases/CreateQueryResult.md)\<`TData`, `TError`\> +[`CreateQueryResult`](../type-aliases/CreateQueryResult.md)\<`TData`, `TError`\> diff --git a/docs/framework/svelte/reference/functions/infiniteQueryOptions.md b/docs/framework/svelte/reference/functions/infiniteQueryOptions.md index 52ccd5c763..c945ae2dbc 100644 --- a/docs/framework/svelte/reference/functions/infiniteQueryOptions.md +++ b/docs/framework/svelte/reference/functions/infiniteQueryOptions.md @@ -37,8 +37,8 @@ Defined in: [packages/svelte-query/src/infiniteQueryOptions.ts:4](https://github ### options -[`CreateInfiniteQueryOptions`](../../type-aliases/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> +[`CreateInfiniteQueryOptions`](../type-aliases/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> ## Returns -[`CreateInfiniteQueryOptions`](../../type-aliases/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> +[`CreateInfiniteQueryOptions`](../type-aliases/CreateInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> diff --git a/docs/framework/svelte/reference/functions/queryOptions.md b/docs/framework/svelte/reference/functions/queryOptions.md index 1043d3fafc..375edd54b7 100644 --- a/docs/framework/svelte/reference/functions/queryOptions.md +++ b/docs/framework/svelte/reference/functions/queryOptions.md @@ -35,11 +35,11 @@ Defined in: [packages/svelte-query/src/queryOptions.ts:30](https://github.com/Ta #### options -[`DefinedInitialDataOptions`](../../type-aliases/DefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> +[`DefinedInitialDataOptions`](../type-aliases/DefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> ### Returns -[`CreateQueryOptions`](../../type-aliases/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` & `object` +[`CreateQueryOptions`](../type-aliases/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` & `object` ## Call Signature @@ -71,8 +71,8 @@ Defined in: [packages/svelte-query/src/queryOptions.ts:41](https://github.com/Ta #### options -[`UndefinedInitialDataOptions`](../../type-aliases/UndefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> +[`UndefinedInitialDataOptions`](../type-aliases/UndefinedInitialDataOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> ### Returns -[`CreateQueryOptions`](../../type-aliases/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` & `object` +[`CreateQueryOptions`](../type-aliases/CreateQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` & `object` diff --git a/docs/framework/svelte/reference/functions/useMutationState.md b/docs/framework/svelte/reference/functions/useMutationState.md index b1da2816e8..96cc3b3865 100644 --- a/docs/framework/svelte/reference/functions/useMutationState.md +++ b/docs/framework/svelte/reference/functions/useMutationState.md @@ -21,7 +21,7 @@ Defined in: [packages/svelte-query/src/useMutationState.svelte.ts:22](https://gi ### options -[`MutationStateOptions`](../../type-aliases/MutationStateOptions.md)\<`TResult`\> = `{}` +[`MutationStateOptions`](../type-aliases/MutationStateOptions.md)\<`TResult`\> = `{}` ### queryClient? diff --git a/docs/framework/svelte/reference/index.md b/docs/framework/svelte/reference/index.md index 715cd8f0e7..d55df3a954 100644 --- a/docs/framework/svelte/reference/index.md +++ b/docs/framework/svelte/reference/index.md @@ -7,53 +7,53 @@ title: "@tanstack/svelte-query" ## Type Aliases -- [Accessor](../type-aliases/Accessor.md) -- [CreateBaseMutationResult](../type-aliases/CreateBaseMutationResult.md) -- [CreateBaseQueryOptions](../type-aliases/CreateBaseQueryOptions.md) -- [CreateBaseQueryResult](../type-aliases/CreateBaseQueryResult.md) -- [CreateInfiniteQueryOptions](../type-aliases/CreateInfiniteQueryOptions.md) -- [CreateInfiniteQueryResult](../type-aliases/CreateInfiniteQueryResult.md) -- [CreateMutateAsyncFunction](../type-aliases/CreateMutateAsyncFunction.md) -- [CreateMutateFunction](../type-aliases/CreateMutateFunction.md) -- [CreateMutationOptions](../type-aliases/CreateMutationOptions.md) -- [CreateMutationResult](../type-aliases/CreateMutationResult.md) -- [CreateQueryOptions](../type-aliases/CreateQueryOptions.md) -- [CreateQueryResult](../type-aliases/CreateQueryResult.md) -- [DefinedCreateBaseQueryResult](../type-aliases/DefinedCreateBaseQueryResult.md) -- [DefinedCreateQueryResult](../type-aliases/DefinedCreateQueryResult.md) -- [DefinedInitialDataOptions](../type-aliases/DefinedInitialDataOptions.md) -- [HydrationBoundary](../type-aliases/HydrationBoundary.md) -- [MutationStateOptions](../type-aliases/MutationStateOptions.md) -- [QueriesOptions](../type-aliases/QueriesOptions.md) -- [QueriesResults](../type-aliases/QueriesResults.md) -- [QueryClientProviderProps](../type-aliases/QueryClientProviderProps.md) -- [UndefinedInitialDataOptions](../type-aliases/UndefinedInitialDataOptions.md) +- [Accessor](./type-aliases/Accessor.md) +- [CreateBaseMutationResult](./type-aliases/CreateBaseMutationResult.md) +- [CreateBaseQueryOptions](./type-aliases/CreateBaseQueryOptions.md) +- [CreateBaseQueryResult](./type-aliases/CreateBaseQueryResult.md) +- [CreateInfiniteQueryOptions](./type-aliases/CreateInfiniteQueryOptions.md) +- [CreateInfiniteQueryResult](./type-aliases/CreateInfiniteQueryResult.md) +- [CreateMutateAsyncFunction](./type-aliases/CreateMutateAsyncFunction.md) +- [CreateMutateFunction](./type-aliases/CreateMutateFunction.md) +- [CreateMutationOptions](./type-aliases/CreateMutationOptions.md) +- [CreateMutationResult](./type-aliases/CreateMutationResult.md) +- [CreateQueryOptions](./type-aliases/CreateQueryOptions.md) +- [CreateQueryResult](./type-aliases/CreateQueryResult.md) +- [DefinedCreateBaseQueryResult](./type-aliases/DefinedCreateBaseQueryResult.md) +- [DefinedCreateQueryResult](./type-aliases/DefinedCreateQueryResult.md) +- [DefinedInitialDataOptions](./type-aliases/DefinedInitialDataOptions.md) +- [HydrationBoundary](./type-aliases/HydrationBoundary.md) +- [MutationStateOptions](./type-aliases/MutationStateOptions.md) +- [QueriesOptions](./type-aliases/QueriesOptions.md) +- [QueriesResults](./type-aliases/QueriesResults.md) +- [QueryClientProviderProps](./type-aliases/QueryClientProviderProps.md) +- [UndefinedInitialDataOptions](./type-aliases/UndefinedInitialDataOptions.md) ## Variables -- [HydrationBoundary](../variables/HydrationBoundary.md) +- [HydrationBoundary](./variables/HydrationBoundary.md) ## Functions -- [createInfiniteQuery](../functions/createInfiniteQuery.md) -- [createMutation](../functions/createMutation.md) -- [createQueries](../functions/createQueries.md) -- [createQuery](../functions/createQuery.md) -- [getIsRestoringContext](../functions/getIsRestoringContext.md) -- [getQueryClientContext](../functions/getQueryClientContext.md) -- [infiniteQueryOptions](../functions/infiniteQueryOptions.md) -- [queryOptions](../functions/queryOptions.md) -- [setIsRestoringContext](../functions/setIsRestoringContext.md) -- [setQueryClientContext](../functions/setQueryClientContext.md) -- [useHydrate](../functions/useHydrate.md) -- [useIsFetching](../functions/useIsFetching.md) -- [useIsMutating](../functions/useIsMutating.md) -- [useIsRestoring](../functions/useIsRestoring.md) -- [useMutationState](../functions/useMutationState.md) -- [useQueryClient](../functions/useQueryClient.md) +- [createInfiniteQuery](./functions/createInfiniteQuery.md) +- [createMutation](./functions/createMutation.md) +- [createQueries](./functions/createQueries.md) +- [createQuery](./functions/createQuery.md) +- [getIsRestoringContext](./functions/getIsRestoringContext.md) +- [getQueryClientContext](./functions/getQueryClientContext.md) +- [infiniteQueryOptions](./functions/infiniteQueryOptions.md) +- [queryOptions](./functions/queryOptions.md) +- [setIsRestoringContext](./functions/setIsRestoringContext.md) +- [setQueryClientContext](./functions/setQueryClientContext.md) +- [useHydrate](./functions/useHydrate.md) +- [useIsFetching](./functions/useIsFetching.md) +- [useIsMutating](./functions/useIsMutating.md) +- [useIsRestoring](./functions/useIsRestoring.md) +- [useMutationState](./functions/useMutationState.md) +- [useQueryClient](./functions/useQueryClient.md) ## References ### QueryClientProvider -Renames and re-exports [HydrationBoundary](../variables/HydrationBoundary.md) +Renames and re-exports [HydrationBoundary](./variables/HydrationBoundary.md) diff --git a/docs/framework/svelte/ssr.md b/docs/framework/svelte/ssr.md index 7448229caa..c9eccca426 100644 --- a/docs/framework/svelte/ssr.md +++ b/docs/framework/svelte/ssr.md @@ -34,7 +34,7 @@ The recommended way to achieve this is to use the `browser` module from SvelteKi Svelte Query supports two ways of prefetching data on the server and passing that to the client with SvelteKit. -If you wish to view the ideal SSR setup, please have a look at the [SSR example](../examples/ssr). +If you wish to view the ideal SSR setup, please have a look at the [SSR example](./examples/ssr). ### Using `initialData` diff --git a/docs/framework/vue/guides/ssr.md b/docs/framework/vue/guides/ssr.md index 0ebb3e7d30..623743cf73 100644 --- a/docs/framework/vue/guides/ssr.md +++ b/docs/framework/vue/guides/ssr.md @@ -253,6 +253,6 @@ In case you are creating the `QueryClient` for every request, Vue Query creates 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. -To clear the cache after it is not needed and to lower memory consumption, you can add a call to [`queryClient.clear()`](../../../../reference/QueryClient/#queryclientclear) after the request is handled and dehydrated state has been sent to the client. +To clear the cache after it is not needed and to lower memory consumption, you can add a call to [`queryClient.clear()`](../../../reference/QueryClient/#queryclientclear) after the request is handled and dehydrated state has been sent to the client. Alternatively, you can set a smaller `gcTime`. diff --git a/docs/framework/vue/guides/suspense.md b/docs/framework/vue/guides/suspense.md index 5c06d2deb5..d25d27ab9d 100644 --- a/docs/framework/vue/guides/suspense.md +++ b/docs/framework/vue/guides/suspense.md @@ -51,4 +51,4 @@ export default defineComponent({ ## Fetch-on-render vs Render-as-you-fetch -Out of the box, Vue Query in `suspense` mode works really well as a **Fetch-on-render** solution with no additional configuration. This means that when your components attempt to mount, they will trigger query fetching and suspend, but only once you have imported them and mounted them. If you want to take it to the next level and implement a **Render-as-you-fetch** model, we recommend implementing [Prefetching](../prefetching) on routing callbacks and/or user interactions events to start loading queries before they are mounted and hopefully even before you start importing or mounting their parent components. +Out of the box, Vue Query in `suspense` mode works really well as a **Fetch-on-render** solution with no additional configuration. This means that when your components attempt to mount, they will trigger query fetching and suspend, but only once you have imported them and mounted them. If you want to take it to the next level and implement a **Render-as-you-fetch** model, we recommend implementing [Prefetching](./prefetching) on routing callbacks and/or user interactions events to start loading queries before they are mounted and hopefully even before you start importing or mounting their parent components. diff --git a/docs/framework/vue/installation.md b/docs/framework/vue/installation.md index 0f0237d9e2..98b2237a4c 100644 --- a/docs/framework/vue/installation.md +++ b/docs/framework/vue/installation.md @@ -29,7 +29,7 @@ or bun add @tanstack/vue-query ``` -> Wanna give it a spin before you download? Try out the [basic](../examples/basic) example! +> Wanna give it a spin before you download? Try out the [basic](./examples/basic) example! Vue Query is compatible with Vue 2.x and 3.x diff --git a/docs/framework/vue/overview.md b/docs/framework/vue/overview.md index 31c8da66ff..91e3ed902c 100644 --- a/docs/framework/vue/overview.md +++ b/docs/framework/vue/overview.md @@ -11,6 +11,6 @@ replace: { 'React': 'Vue', 'react-query': 'vue-query' } ## You talked me into it, so what now? -- Learn Vue Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/useQuery) +- Learn Vue Query at your own pace with our amazingly thorough [Walkthrough Guide](./installation) and [API Reference](./reference/useQuery) [//]: # 'Materials' diff --git a/docs/framework/vue/quick-start.md b/docs/framework/vue/quick-start.md index 083771896d..fac18038ac 100644 --- a/docs/framework/vue/quick-start.md +++ b/docs/framework/vue/quick-start.md @@ -7,7 +7,7 @@ replace: { 'React': 'Vue', 'react-query': 'vue-query' } [//]: # 'Example' -If you're looking for a fully functioning example, please have a look at our [basic codesandbox example](../examples/basic) +If you're looking for a fully functioning example, please have a look at our [basic codesandbox example](./examples/basic) ```vue