From bee7042d7556a0a60d58a699969ab18e78815058 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Mon, 8 Apr 2024 23:18:49 +0200 Subject: [PATCH 1/8] wip - 1 --- docs/framework/react/guides/migrating-to-react-query-3.md | 2 +- docs/framework/react/guides/migrating-to-react-query-4.md | 6 +++--- docs/framework/react/guides/migrating-to-v5.md | 2 +- docs/framework/react/guides/mutations.md | 2 +- docs/framework/react/guides/prefetching.md | 2 +- docs/framework/react/guides/ssr.md | 2 +- .../react/guides/updates-from-mutation-responses.md | 2 +- docs/framework/react/plugins/persistQueryClient.md | 6 +++--- docs/framework/react/reference/useInfiniteQuery.md | 2 +- docs/framework/react/reference/useQuery.md | 2 +- docs/framework/vue/guides/ssr.md | 2 +- 11 files changed, 15 insertions(+), 15 deletions(-) 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 0fc60ed3df..c1fb416d98 100644 --- a/docs/framework/react/guides/migrating-to-react-query-3.md +++ b/docs/framework/react/guides/migrating-to-react-query-3.md @@ -103,7 +103,7 @@ 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](../QueryErrorResetBoundary) +- [QueryErrorResetBoundary](../reference/QueryErrorResetBoundary) - [useQueryErrorResetBoundary](../useQueryErrorResetBoundary) ### `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 8624613cd7..6dec819ecf 100644 --- a/docs/framework/react/guides/migrating-to-react-query-4.md +++ b/docs/framework/react/guides/migrating-to-react-query-4.md @@ -234,7 +234,7 @@ The filter defaults to `all`, and you can choose to only match `active` or `inac #### refetchActive / refetchInactive -[queryClient.invalidateQueries](../QueryClient#queryclientinvalidatequeries) had two additional, similar flags: +[queryClient.invalidateQueries](../../../reference/QueryClient/#queryclientinvalidatequeries) had two additional, similar flags: ``` refetchActive: Boolean @@ -272,7 +272,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`](../createSyncStoragePersister) and [`createAsyncStoragePersister`](../createAsyncStoragePersister) 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) and [`createAsyncStoragePersister`](../plugins/createAsyncStoragePersister) 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: @@ -419,7 +419,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](../QueryClient#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/#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 41f7c72096..bd39bc3312 100644 --- a/docs/framework/react/guides/migrating-to-v5.md +++ b/docs/framework/react/guides/migrating-to-v5.md @@ -492,7 +492,7 @@ See the [useQueries docs](../useQueries#combine) for more details. ### Experimental `fine grained storage persister` -See the [experimental_createPersister docs](../createPersister) for more details. +See the [experimental_createPersister docs](../plugins/createPersister) for more details. [//]: # 'FrameworkSpecificNewFeatures' diff --git a/docs/framework/react/guides/mutations.md b/docs/framework/react/guides/mutations.md index f32ac895ec..06365b5b1d 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](../QueryClient#queryclientinvalidatequeries) and the [Query Client's `setQueryData` method](../QueryClient#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/#queryclientinvalidatequeries) and the [Query Client's `setQueryData` method](../../../reference/QueryClient/#queryclientsetquerydata), mutations become a very powerful tool. [//]: # 'Info1' diff --git a/docs/framework/react/guides/prefetching.md b/docs/framework/react/guides/prefetching.md index f72d0cdb4f..e9f7ccc7bd 100644 --- a/docs/framework/react/guides/prefetching.md +++ b/docs/framework/react/guides/prefetching.md @@ -426,7 +426,7 @@ Integration with other routers is also possible, see the [React Router example]( ## 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](../QueryClient#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/#queryclientsetquerydata) to directly add or update a query's cached result by key. [//]: # 'ExampleManualPriming' diff --git a/docs/framework/react/guides/ssr.md b/docs/framework/react/guides/ssr.md index ea4cb02445..1ebac838cf 100644 --- a/docs/framework/react/guides/ssr.md +++ b/docs/framework/react/guides/ssr.md @@ -548,7 +548,7 @@ On the server, `gcTime` defaults to `Infinity` which disables manual garbage col Avoid setting `gcTime` to `0` as it may result in a hydration error. This occurs because the [Hydration Boundary](../hydration#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()`](../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/react/guides/updates-from-mutation-responses.md b/docs/framework/react/guides/updates-from-mutation-responses.md index 88f496e2a5..9601b19a67 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`](../QueryClient#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/#queryclientsetquerydata) method: [//]: # 'Example' diff --git a/docs/framework/react/plugins/persistQueryClient.md b/docs/framework/react/plugins/persistQueryClient.md index ca3ff5a151..c4d7ceadbe 100644 --- a/docs/framework/react/plugins/persistQueryClient.md +++ b/docs/framework/react/plugins/persistQueryClient.md @@ -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](../QueryClientProvider): +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): ```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](../QueryClientProvider), and additionally: +`PersistQueryClientProvider` takes the same props as [QueryClientProvider](../reference/QueryClientProvider), 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](../QueryClient#queryclientresumepausedmutations) + - can be used to [resumePausedMutations](../../../reference/QueryClient/#queryclientresumepausedmutations) - if a Promise is returned, it will be awaited; restoring is seen as ongoing until then ### useIsRestoring diff --git a/docs/framework/react/reference/useInfiniteQuery.md b/docs/framework/react/reference/useInfiniteQuery.md index 5bb4e76f34..eda776767c 100644 --- a/docs/framework/react/reference/useInfiniteQuery.md +++ b/docs/framework/react/reference/useInfiniteQuery.md @@ -29,7 +29,7 @@ const { The options for `useInfiniteQuery` are identical to the [`useQuery` hook](../useQuery) with the addition of the following: - `queryFn: (context: QueryFunctionContext) => Promise` - - **Required, but only if no default query function has been defined** [`defaultQueryFn`](../default-query-function) + - **Required, but only if no default query function has been defined** [`defaultQueryFn`](../../guides/default-query-function) - The function that the query will use to request data. - Receives a [QueryFunctionContext](../query-functions#queryfunctioncontext) - Must return a promise that will either resolve data or throw an error. diff --git a/docs/framework/react/reference/useQuery.md b/docs/framework/react/reference/useQuery.md index a1071afebd..4c9ddf3441 100644 --- a/docs/framework/react/reference/useQuery.md +++ b/docs/framework/react/reference/useQuery.md @@ -66,7 +66,7 @@ const { - The query key will be hashed into a stable hash. See [Query Keys](../query-keys) 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](../default-query-function) for more information. + - **Required, but only if no default query function has been defined** See [Default Query Function](../../guides/default-query-function) for more information. - The function that the query will use to request data. - Receives a [QueryFunctionContext](../query-functions#queryfunctioncontext) - Must return a promise that will either resolve data or throw an error. The data cannot be `undefined`. diff --git a/docs/framework/vue/guides/ssr.md b/docs/framework/vue/guides/ssr.md index fb47cb3dec..97e0b623e8 100644 --- a/docs/framework/vue/guides/ssr.md +++ b/docs/framework/vue/guides/ssr.md @@ -235,6 +235,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()`](../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`. From 2c0f3842e4267bc9aa497ce9d9ee5f2565edaf1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Tue, 9 Apr 2024 22:52:53 +0200 Subject: [PATCH 2/8] Fix more links --- docs/framework/angular/guides/caching.md | 2 +- .../guides/invalidations-from-mutations.md | 2 +- docs/framework/react/guides/advanced-ssr.md | 2 +- docs/framework/react/guides/caching.md | 2 +- .../react/guides/important-defaults.md | 4 +-- .../react/guides/initial-query-data.md | 2 +- .../guides/migrating-to-react-query-3.md | 4 +-- .../guides/migrating-to-react-query-4.md | 10 +++--- .../framework/react/guides/migrating-to-v5.md | 10 +++--- docs/framework/react/guides/mutations.md | 8 ++--- docs/framework/react/guides/network-mode.md | 2 +- .../react/guides/placeholder-query-data.md | 2 +- docs/framework/react/guides/prefetching.md | 6 ++-- docs/framework/react/guides/queries.md | 2 +- docs/framework/react/guides/query-keys.md | 4 +-- docs/framework/react/guides/query-options.md | 2 +- .../react/guides/render-optimizations.md | 4 +-- docs/framework/react/guides/ssr.md | 4 +-- docs/framework/react/guides/suspense.md | 8 ++--- docs/framework/react/guides/testing.md | 2 +- .../guides/updates-from-mutation-responses.md | 2 +- docs/framework/react/installation.md | 2 +- docs/framework/react/overview.md | 2 +- .../plugins/createAsyncStoragePersister.md | 2 +- .../react/plugins/persistQueryClient.md | 10 +++--- .../react/reference/useInfiniteQuery.md | 2 +- .../react/reference/useIsFetching.md | 2 +- .../react/reference/useIsMutating.md | 2 +- docs/framework/react/reference/useMutation.md | 4 +-- .../react/reference/useMutationState.md | 2 +- docs/framework/react/reference/useQuery.md | 10 +++--- docs/framework/react/typescript.md | 8 ++--- .../lukemorales-query-key-factory.md | 10 ++++++ docs/framework/vue/guides/ssr.md | 2 +- docs/framework/vue/overview.md | 2 +- docs/reference/InfiniteQueryObserver.md | 2 +- docs/reference/QueriesObserver.md | 2 +- docs/reference/QueryCache.md | 8 ++--- docs/reference/QueryClient.md | 34 +++++++++---------- docs/reference/QueryObserver.md | 2 +- 40 files changed, 101 insertions(+), 91 deletions(-) create mode 100644 docs/framework/vue/community/lukemorales-query-key-factory.md diff --git a/docs/framework/angular/guides/caching.md b/docs/framework/angular/guides/caching.md index dcec44c533..e2cfe9d824 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) before reading this guide +> Please thoroughly read the [Important Defaults](./important-defaults) before reading this guide ## Basic Example diff --git a/docs/framework/angular/guides/invalidations-from-mutations.md b/docs/framework/angular/guides/invalidations-from-mutations.md index 3c37172fce..362ecd7797 100644 --- a/docs/framework/angular/guides/invalidations-from-mutations.md +++ b/docs/framework/angular/guides/invalidations-from-mutations.md @@ -40,4 +40,4 @@ export class TodosComponent { [//]: # 'Example2' -You can wire up your invalidations to happen using any of the callbacks available in the [`injectMutation` function](../mutations) +You can wire up your invalidations to happen using any of the callbacks available in the [`injectMutation` function](./mutations) diff --git a/docs/framework/react/guides/advanced-ssr.md b/docs/framework/react/guides/advanced-ssr.md index f1736a885f..abef70e177 100644 --- a/docs/framework/react/guides/advanced-ssr.md +++ b/docs/framework/react/guides/advanced-ssr.md @@ -421,7 +421,7 @@ 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. diff --git a/docs/framework/react/guides/caching.md b/docs/framework/react/guides/caching.md index a49d5f33a5..8525ba6ebf 100644 --- a/docs/framework/react/guides/caching.md +++ b/docs/framework/react/guides/caching.md @@ -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`](../useQuery) 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) 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/important-defaults.md b/docs/framework/react/guides/important-defaults.md index 4197e7b957..b23b34b8b4 100644 --- a/docs/framework/react/guides/important-defaults.md +++ b/docs/framework/react/guides/important-defaults.md @@ -36,7 +36,7 @@ Out of the box, TanStack Query is configured with **aggressive but sane** defaul Have a look at the following articles from our Community Resources for further explanations of the defaults: -- [Practical React Query](../tkdodos-blog#1-practical-react-query) -- [React Query as a State Manager](../tkdodos-blog#10-react-query-as-a-state-manager) +- [Practical React Query](../../community/tkdodos-blog#1-practical-react-query) +- [React Query as a State Manager](../../community/tkdodos-blog#10-react-query-as-a-state-manager) [//]: # 'Materials' diff --git a/docs/framework/react/guides/initial-query-data.md b/docs/framework/react/guides/initial-query-data.md index 987050fbb7..e4cbb978d4 100644 --- a/docs/framework/react/guides/initial-query-data.md +++ b/docs/framework/react/guides/initial-query-data.md @@ -170,6 +170,6 @@ const result = useQuery({ ## Further reading -For a comparison between `Initial Data` and `Placeholder Data`, have a look at the [Community Resources](../tkdodos-blog#9-placeholder-and-initial-data-in-react-query). +For a comparison between `Initial Data` and `Placeholder Data`, have a look at the [Community Resources](../../community/tkdodos-blog#9-placeholder-and-initial-data-in-react-query). [//]: # '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 c1fb416d98..d1d9ce48c1 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) -- [useQueryErrorResetBoundary](../useQueryErrorResetBoundary) +- [QueryErrorResetBoundary](../../reference/QueryErrorResetBoundary) +- [useQueryErrorResetBoundary](../../reference/useQueryErrorResetBoundary) ### `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 6dec819ecf..dc4bc988fa 100644 --- a/docs/framework/react/guides/migrating-to-react-query-4.md +++ b/docs/framework/react/guides/migrating-to-react-query-4.md @@ -134,7 +134,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](guides/initial-query-data#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#initial-data-function) will also _not_ set data. Further, it is an easy bug to produce `Promise` by adding logging in the queryFn: @@ -234,7 +234,7 @@ The filter defaults to `all`, and you can choose to only match `active` or `inac #### refetchActive / refetchInactive -[queryClient.invalidateQueries](../../../reference/QueryClient/#queryclientinvalidatequeries) had two additional, similar flags: +[queryClient.invalidateQueries](../../../../reference/QueryClient/#queryclientinvalidatequeries) had two additional, similar flags: ``` refetchActive: Boolean @@ -272,7 +272,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) and [`createAsyncStoragePersister`](../plugins/createAsyncStoragePersister) 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) and [`createAsyncStoragePersister`](../../plugins/createAsyncStoragePersister) 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 @@ 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 @@ 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/#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/#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 bd39bc3312..a98874d54e 100644 --- a/docs/framework/react/guides/migrating-to-v5.md +++ b/docs/framework/react/guides/migrating-to-v5.md @@ -186,7 +186,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 @@ -235,7 +235,7 @@ useQuery({ }) ``` -For a way to set a different kind of Error globally, see [the TypeScript Guide](./typescript#registering-a-global-error). +For a way to set a different kind of Error globally, see [the TypeScript Guide](../../typescript#registering-a-global-error). ### eslint `prefer-query-object-syntax` rule is removed @@ -488,17 +488,17 @@ Infinite Queries can be prefetched like regular Queries. Per default, only the f ### New `combine` option for `useQueries` -See the [useQueries docs](../useQueries#combine) for more details. +See the [useQueries docs](../../reference/useQueries#combine) for more details. ### Experimental `fine grained storage persister` -See the [experimental_createPersister docs](../plugins/createPersister) for more details. +See the [experimental_createPersister docs](../../plugins/createPersister) for more details. [//]: # 'FrameworkSpecificNewFeatures' ### Typesafe way to create Query Options -See the [TypeScript docs](./typescript#typing-query-options) for more details. +See the [TypeScript docs](../../typescript#typing-query-options) for more details. ### new hooks for suspense diff --git a/docs/framework/react/guides/mutations.md b/docs/framework/react/guides/mutations.md index 06365b5b1d..0db09d7373 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/#queryclientinvalidatequeries) and the [Query Client's `setQueryData` method](../../../reference/QueryClient/#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/#queryclientinvalidatequeries) and the [Query Client's `setQueryData` method](../../../../reference/QueryClient/#queryclientsetquerydata), mutations become a very powerful tool. [//]: # 'Info1' @@ -343,7 +343,7 @@ queryClient.resumePausedMutations() ### Persisting Offline mutations -If you persist offline mutations with the [persistQueryClient plugin](../persistQueryClient), 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), 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,13 +386,13 @@ 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. [//]: # 'Materials' ## Further reading -For more information about mutations, have a look at [#12: Mastering Mutations in React Query](../tkdodos-blog#12-mastering-mutations-in-react-query) from +For more information about mutations, have a look at [#12: Mastering Mutations in React Query](../../community/tkdodos-blog#12-mastering-mutations-in-react-query) from the Community Resources. [//]: # 'Materials' diff --git a/docs/framework/react/guides/network-mode.md b/docs/framework/react/guides/network-mode.md index 90ae6bb9d2..094971806f 100644 --- a/docs/framework/react/guides/network-mode.md +++ b/docs/framework/react/guides/network-mode.md @@ -37,7 +37,7 @@ In those situations, the first fetch might succeed because it comes from an offl ## Devtools -The [TanStack Query Devtools](./devtools) 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](../onlineManager) in an offline state. +The [TanStack Query Devtools](../../devtools) 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) 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 4d8271d6ac..0fd8087ddd 100644 --- a/docs/framework/react/guides/placeholder-query-data.md +++ b/docs/framework/react/guides/placeholder-query-data.md @@ -96,6 +96,6 @@ function Todo({ blogPostId }) { ## Further reading -For a comparison between `Placeholder Data` and `Initial Data`, have a look at the [Community Resources](../tkdodos-blog#9-placeholder-and-initial-data-in-react-query). +For a comparison between `Placeholder Data` and `Initial Data`, have a look at the [Community Resources](../../community/tkdodos-blog#9-placeholder-and-initial-data-in-react-query). [//]: # 'Materials' diff --git a/docs/framework/react/guides/prefetching.md b/docs/framework/react/guides/prefetching.md index e9f7ccc7bd..b60e8cb344 100644 --- a/docs/framework/react/guides/prefetching.md +++ b/docs/framework/react/guides/prefetching.md @@ -420,13 +420,13 @@ const articleRoute = new Route({ }) ``` -Integration with other routers is also possible, see the [React Router example](../examples/react-router) for another demonstration. +Integration with other routers is also possible, see the [React Router example](../../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/#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/#queryclientsetquerydata) to directly add or update a query's cached result by key. [//]: # 'ExampleManualPriming' @@ -439,7 +439,7 @@ queryClient.setQueryData(['todos'], todos) ## Further reading -For a deep-dive on how to get data into your Query Cache before you fetch, have a look at [#17: Seeding the Query Cache](../tkdodos-blog#17-seeding-the-query-cache) from the Community Resources. +For a deep-dive on how to get data into your Query Cache before you fetch, have a look at [#17: Seeding the Query Cache](../../community/tkdodos-blog#17-seeding-the-query-cache) from the Community Resources. 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). diff --git a/docs/framework/react/guides/queries.md b/docs/framework/react/guides/queries.md index a666d882f4..26c0b0e198 100644 --- a/docs/framework/react/guides/queries.md +++ b/docs/framework/react/guides/queries.md @@ -140,6 +140,6 @@ So keep in mind that a query can be in `pending` state without actually fetching ## Further Reading -For an alternative way of performing status checks, have a look at the [Community Resources](../tkdodos-blog#4-status-checks-in-react-query). +For an alternative way of performing status checks, have a look at the [Community Resources](../../community/tkdodos-blog#4-status-checks-in-react-query). [//]: # 'Materials' diff --git a/docs/framework/react/guides/query-keys.md b/docs/framework/react/guides/query-keys.md index 1d2c418860..08aa24a58c 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) 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) 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](../tkdodos-blog#8-effective-react-query-keys) and check the [Query Key Factory Package](../community-projects#query-key-factory) from +For tips on organizing Query Keys in larger applications, have a look at [Effective React Query Keys](../../community/tkdodos-blog#8-effective-react-query-keys) and check the [Query Key Factory Package](../../community/community-projects#query-key-factory) from the Community Resources. [//]: # 'Materials' diff --git a/docs/framework/react/guides/query-options.md b/docs/framework/react/guides/query-options.md index 6894b0e119..08c80c0311 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#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#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' diff --git a/docs/framework/react/guides/render-optimizations.md b/docs/framework/react/guides/render-optimizations.md index 4fc89f3eb9..f50b4dfb87 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: Custom getters are 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) to guard against this pitfall. +> Note: Custom getters are 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) to guard against this pitfall. ## select @@ -70,5 +70,5 @@ export const useTodoCount = () => { ## Further Reading -For an in-depth guide about these topics, read [React Query Render Optimizations](../tkdodos-blog#3-react-query-render-optimizations) from +For an in-depth guide about these topics, read [React Query Render Optimizations](../../community/tkdodos-blog#3-react-query-render-optimizations) from the Community Resources. diff --git a/docs/framework/react/guides/ssr.md b/docs/framework/react/guides/ssr.md index 1ebac838cf..7af63a9df8 100644 --- a/docs/framework/react/guides/ssr.md +++ b/docs/framework/react/guides/ssr.md @@ -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](../hydration#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#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/#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/react/guides/suspense.md b/docs/framework/react/guides/suspense.md index f45dd6301e..368a331ac1 100644 --- a/docs/framework/react/guides/suspense.md +++ b/docs/framework/react/guides/suspense.md @@ -5,9 +5,9 @@ title: Suspense React Query can also be used with React's Suspense for Data Fetching API's. For this, we have dedicated hooks: -- [useSuspenseQuery](../useSuspenseQuery) -- [useSuspenseInfiniteQuery](../useSuspenseInfiniteQuery) -- [useSuspenseQueries](../useSuspenseQueries) +- [useSuspenseQuery](../../reference/useSuspenseQuery) +- [useSuspenseInfiniteQuery](../../reference/useSuspenseInfiniteQuery) +- [useSuspenseQueries](../../reference/useSuspenseQueries) When using suspense mode, `status` states and `error` objects are not needed and are then replaced by usage of the `React.Suspense` component (including the use of the `fallback` prop and React error boundaries for catching errors). Please read the [Resetting Error Boundaries](#resetting-error-boundaries) and look at the [Suspense Example](https://stackblitz.com/github/TanStack/query/tree/main/examples/react/suspense) for more information on how to set up suspense mode. @@ -135,4 +135,4 @@ 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) guide. +For more information, check out the [NextJs Suspense Streaming Example](../../examples/nextjs-suspense-streaming) and the [Advanced Rendering & Hydration](../advanced-ssr) guide. diff --git a/docs/framework/react/guides/testing.md b/docs/framework/react/guides/testing.md index 1cb3308d33..81920b50b3 100644 --- a/docs/framework/react/guides/testing.md +++ b/docs/framework/react/guides/testing.md @@ -179,5 +179,5 @@ _Note_: when using React 18, the semantics of `waitFor` have changed as noted ab ## Further reading -For additional tips and an alternative setup using `mock-service-worker`, have a look at [Testing React Query](../tkdodos-blog#5-testing-react-query) from +For additional tips and an alternative setup using `mock-service-worker`, have a look at [Testing React Query](../../community/tkdodos-blog#5-testing-react-query) from the Community Resources. diff --git a/docs/framework/react/guides/updates-from-mutation-responses.md b/docs/framework/react/guides/updates-from-mutation-responses.md index 9601b19a67..be5af9b611 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/#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/#queryclientsetquerydata) method: [//]: # 'Example' diff --git a/docs/framework/react/installation.md b/docs/framework/react/installation.md index acf9f8f341..46862e7d6d 100644 --- a/docs/framework/react/installation.md +++ b/docs/framework/react/installation.md @@ -54,7 +54,7 @@ Opera >= 77 ### Recommendations -It is recommended to also use our [ESLint Plugin Query](./eslint/eslint-plugin-query) 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) 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 1f205b58c6..a4e806d4bd 100644 --- a/docs/framework/react/overview.md +++ b/docs/framework/react/overview.md @@ -96,6 +96,6 @@ function Example() { ## You talked me into it, so what now? - Consider taking the official [React Query Course](https://query.gg?s=tanstack) (or buying it for your whole team!) -- Learn React Query at your own pace with our amazingly thorough [Walkthrough Guide](./installation) and [API Reference](../useQuery) +- Learn React Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/useQuery) [//]: # 'Materials' diff --git a/docs/framework/react/plugins/createAsyncStoragePersister.md b/docs/framework/react/plugins/createAsyncStoragePersister.md index 37a07eb10e..b0dfe9c735 100644 --- a/docs/framework/react/plugins/createAsyncStoragePersister.md +++ b/docs/framework/react/plugins/createAsyncStoragePersister.md @@ -34,7 +34,7 @@ bun add @tanstack/query-async-storage-persister @tanstack/react-query-persist-cl - Import the `createAsyncStoragePersister` function - 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 -- Wrap your app by using [`PersistQueryClientProvider`](../persistQueryClient.md#persistqueryclientprovider) component. +- Wrap your app by using [`PersistQueryClientProvider`](../persistQueryClient#persistqueryclientprovider) component. ```tsx import AsyncStorage from '@react-native-async-storage/async-storage' diff --git a/docs/framework/react/plugins/persistQueryClient.md b/docs/framework/react/plugins/persistQueryClient.md index c4d7ceadbe..4653f71009 100644 --- a/docs/framework/react/plugins/persistQueryClient.md +++ b/docs/framework/react/plugins/persistQueryClient.md @@ -58,7 +58,7 @@ the persister `removeClient()` is called and the cache is immediately discarded. ### `persistQueryClientSave` -- Your query/mutation are [`dehydrated`](../hydration#dehydrate) and stored by the persister you provided. +- Your query/mutation are [`dehydrated`](../../reference/hydration#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`](../hydration#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#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): +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): ```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), and additionally: +`PersistQueryClientProvider` takes the same props as [QueryClientProvider](../../reference/QueryClientProvider), 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/#queryclientresumepausedmutations) + - can be used to [resumePausedMutations](../../../../reference/QueryClient/#queryclientresumepausedmutations) - if a Promise is returned, it will be awaited; restoring is seen as ongoing until then ### useIsRestoring diff --git a/docs/framework/react/reference/useInfiniteQuery.md b/docs/framework/react/reference/useInfiniteQuery.md index eda776767c..eab9149f69 100644 --- a/docs/framework/react/reference/useInfiniteQuery.md +++ b/docs/framework/react/reference/useInfiniteQuery.md @@ -31,7 +31,7 @@ The options for `useInfiniteQuery` are identical to the [`useQuery` hook](../use - `queryFn: (context: QueryFunctionContext) => Promise` - **Required, but only if no default query function has been defined** [`defaultQueryFn`](../../guides/default-query-function) - The function that the query will use to request data. - - Receives a [QueryFunctionContext](../query-functions#queryfunctioncontext) + - Receives a [QueryFunctionContext](../../guides/query-functions#queryfunctioncontext) - Must return a promise that will either resolve data or throw an error. - `initialPageParam: TPageParam` - **Required** diff --git a/docs/framework/react/reference/useIsFetching.md b/docs/framework/react/reference/useIsFetching.md index 1111f69db9..956cb52c25 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](../filters#query-filters) +- `filters?: QueryFilters`: [Query Filters](../../guides/filters#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 f7d2aa5599..836b44218d 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](../filters#mutation-filters) +- `filters?: MutationFilters`: [Mutation Filters](../../guides/filters#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 aac78ab9e2..d24298e994 100644 --- a/docs/framework/react/reference/useMutation.md +++ b/docs/framework/react/reference/useMutation.md @@ -58,7 +58,7 @@ mutate(variables, { - `networkMode: 'online' | 'always' | 'offlineFirst` - Optional - defaults to `'online'` - - see [Network Mode](../network-mode) for more information. + - see [Network Mode](../../guides/network-mode) for more information. - `onMutate: (variables: TVariables) => Promise | TContext | void` - Optional - This function will fire before the mutation function is fired and is passed the same variables the mutation function would receive @@ -127,7 +127,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](../network-mode) for more information. + - see [Network Mode](../../guides/network-mode) 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 fc89038043..a86e62eca5 100644 --- a/docs/framework/react/reference/useMutationState.md +++ b/docs/framework/react/reference/useMutationState.md @@ -41,7 +41,7 @@ const data = useMutationState({ **Options** - `options` - - `filters?: MutationFilters`: [Mutation Filters](../filters#mutation-filters) + - `filters?: MutationFilters`: [Mutation Filters](../../guides/filters#mutation-filters) - `select?: (mutation: Mutation) => TResult` - Use this to transform the mutation state. - `queryClient?: QueryClient`, diff --git a/docs/framework/react/reference/useQuery.md b/docs/framework/react/reference/useQuery.md index 4c9ddf3441..170427fd1b 100644 --- a/docs/framework/react/reference/useQuery.md +++ b/docs/framework/react/reference/useQuery.md @@ -63,20 +63,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](../query-keys) for more information. + - The query key will be hashed into a stable hash. See [Query Keys](../../guides/query-keys) 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) for more information. - The function that the query will use to request data. - - Receives a [QueryFunctionContext](../query-functions#queryfunctioncontext) + - Receives a [QueryFunctionContext](../../guides/query-functions#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](../dependent-queries). + - Can be used for [Dependent Queries](../../guides/dependent-queries). - `networkMode: 'online' | 'always' | 'offlineFirst` - optional - defaults to `'online'` - - see [Network Mode](../network-mode) for more information. + - see [Network Mode](../../guides/network-mode) 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. @@ -210,7 +210,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](../network-mode) for more information. + - see [Network Mode](../../guides/network-mode) for more information. - `isFetching: boolean` - A derived boolean from the `fetchStatus` variable above, provided for convenience. - `isPaused: boolean` diff --git a/docs/framework/react/typescript.md b/docs/framework/react/typescript.md index add86f41d4..a5a7726064 100644 --- a/docs/framework/react/typescript.md +++ b/docs/framework/react/typescript.md @@ -157,7 +157,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](../useQuery.md) and [mutations](../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) and [mutations](../reference/useMutation) 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' @@ -223,12 +223,12 @@ const data = queryClient.getQueryData(['groups']) ## Further Reading -For tips and tricks around type inference, have a look at [React Query and TypeScript](../tkdodos-blog#6-react-query-and-typescript) from -the Community Resources. To find out how to get the best possible type-safety, you can read [Type-safe React Query](../tkdodos-blog#19-type-safe-react-query). +For tips and tricks around type inference, have a look at [React Query and TypeScript](../community/tkdodos-blog#6-react-query-and-typescript) from +the Community Resources. To find out how to get the best possible type-safety, you can read [Type-safe React Query](../community/tkdodos-blog#19-type-safe-react-query). [//]: # 'Materials' ## 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](../disabling-queries) guide. +Read more about it in the [Disabling Queries](../guides/disabling-queries) guide. diff --git a/docs/framework/vue/community/lukemorales-query-key-factory.md b/docs/framework/vue/community/lukemorales-query-key-factory.md new file mode 100644 index 0000000000..800a06f5b5 --- /dev/null +++ b/docs/framework/vue/community/lukemorales-query-key-factory.md @@ -0,0 +1,10 @@ +--- +id: query-key-factory +title: Query Key Factory +--- + +## Query Key Factory + +A library for creating typesafe standardized query keys, useful for cache management in `@tanstack/query` + +Link: https://github.com/lukemorales/query-key-factory diff --git a/docs/framework/vue/guides/ssr.md b/docs/framework/vue/guides/ssr.md index 97e0b623e8..d093328912 100644 --- a/docs/framework/vue/guides/ssr.md +++ b/docs/framework/vue/guides/ssr.md @@ -235,6 +235,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/overview.md b/docs/framework/vue/overview.md index 40e614e376..113d3bfbb9 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](../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/reference/InfiniteQueryObserver.md b/docs/reference/InfiniteQueryObserver.md index 7872393c3d..4d5c252072 100644 --- a/docs/reference/InfiniteQueryObserver.md +++ b/docs/reference/InfiniteQueryObserver.md @@ -23,4 +23,4 @@ const unsubscribe = observer.subscribe((result) => { **Options** -The options for the `InfiniteQueryObserver` are exactly the same as those of [`useInfiniteQuery`](./framework/react/reference/useInfiniteQuery). +The options for the `InfiniteQueryObserver` are exactly the same as those of [`useInfiniteQuery`](../../framework/react/reference/useInfiniteQuery). diff --git a/docs/reference/QueriesObserver.md b/docs/reference/QueriesObserver.md index 6d8b16a2b4..05bfd4b3e7 100644 --- a/docs/reference/QueriesObserver.md +++ b/docs/reference/QueriesObserver.md @@ -21,4 +21,4 @@ const unsubscribe = observer.subscribe((result) => { **Options** -The options for the `QueriesObserver` are exactly the same as those of [`useQueries`](./framework/react/reference/useQueries). +The options for the `QueriesObserver` are exactly the same as those of [`useQueries`](../../framework/react/reference/useQueries). diff --git a/docs/reference/QueryCache.md b/docs/reference/QueryCache.md index df6765ed07..ffa4a20440 100644 --- a/docs/reference/QueryCache.md +++ b/docs/reference/QueryCache.md @@ -56,7 +56,7 @@ const query = queryCache.find(queryKey) **Options** -- `filters?: QueryFilters`: [Query Filters](./framework/react/guides/filters#query-filters) +- `filters?: QueryFilters`: [Query Filters](../../framework/react/guides/filters#query-filters) **Returns** @@ -75,8 +75,8 @@ const queries = queryCache.findAll(queryKey) **Options** -- `queryKey?: QueryKey`: [Query Keys](./framework/react/guides/query-keys) -- `filters?: QueryFilters`: [Query Filters](./framework/react/guides/filters#query-filters) +- `queryKey?: QueryKey`: [Query Keys](../../framework/react/guides/query-keys) +- `filters?: QueryFilters`: [Query Filters](../../framework/react/guides/filters#query-filters) **Returns** @@ -118,6 +118,6 @@ queryCache.clear() ## Further reading To get a better understanding how the QueryCache works internally, have a look at [#18: Inside React Query -](./framework/react/community/tkdodos-blog#18-inside-react-query) from the Community Resources. +](../../framework/react/community/tkdodos-blog#18-inside-react-query) from the Community Resources. [//]: # 'Materials' diff --git a/docs/reference/QueryClient.md b/docs/reference/QueryClient.md index 21be683fa7..d7e1a25442 100644 --- a/docs/reference/QueryClient.md +++ b/docs/reference/QueryClient.md @@ -95,7 +95,7 @@ try { **Options** -The options for `fetchQuery` are exactly the same as those of [`useQuery`](./framework/react/reference/useQuery), except the following: `enabled, refetchInterval, refetchIntervalInBackground, refetchOnWindowFocus, refetchOnReconnect, refetchOnMount, notifyOnChangeProps, throwOnError, select, suspense, placeholderData`; which are strictly for useQuery and useInfiniteQuery. You can check the [source code](https://github.com/TanStack/query/blob/7cd2d192e6da3df0b08e334ea1cf04cd70478827/packages/query-core/src/types.ts#L119) for more clarity. +The options for `fetchQuery` are exactly the same as those of [`useQuery`](../../framework/react/reference/useQuery), except the following: `enabled, refetchInterval, refetchIntervalInBackground, refetchOnWindowFocus, refetchOnReconnect, refetchOnMount, notifyOnChangeProps, throwOnError, select, suspense, placeholderData`; which are strictly for useQuery and useInfiniteQuery. You can check the [source code](https://github.com/TanStack/query/blob/7cd2d192e6da3df0b08e334ea1cf04cd70478827/packages/query-core/src/types.ts#L119) for more clarity. **Returns** @@ -172,7 +172,7 @@ const data = queryClient.getQueryData(queryKey) **Options** -- `queryKey: QueryKey`: [Query Keys](./framework/react/guides/query-keys) +- `queryKey: QueryKey`: [Query Keys](../../framework/react/guides/query-keys) **Returns** @@ -209,7 +209,7 @@ const data = queryClient.getQueriesData(filters) **Options** -- `filters: QueryFilters`: [Query Filters](./framework/react/guides/filters#query-filters) +- `filters: QueryFilters`: [Query Filters](../../framework/react/guides/filters#query-filters) - if a filter is passed, the data with queryKeys matching the filter will be returned **Returns** @@ -235,7 +235,7 @@ queryClient.setQueryData(queryKey, updater) **Options** -- `queryKey: QueryKey`: [Query Keys](./framework/react/guides/query-keys) +- `queryKey: QueryKey`: [Query Keys](../../framework/react/guides/query-keys) - `updater: TQueryFnData | undefined | ((oldData: TQueryFnData | undefined) => TQueryFnData | undefined)` - If non-function is passed, the data will be updated to this value - If a function is passed, it will receive the old data value and be expected to return a new one. @@ -273,7 +273,7 @@ console.log(state.dataUpdatedAt) **Options** -- `queryKey: QueryKey`: [Query Keys](./framework/react/guides/query-keys) +- `queryKey: QueryKey`: [Query Keys](../../framework/react/guides/query-keys) ## `queryClient.setQueriesData` @@ -285,7 +285,7 @@ queryClient.setQueriesData(filters, updater) **Options** -- `filters: QueryFilters`: [Query Filters](./framework/react/guides/filters#query-filters) +- `filters: QueryFilters`: [Query Filters](../../framework/react/guides/filters#query-filters) - if a filter is passed, queryKeys matching the filter will be updated - `updater: TQueryFnData | (oldData: TQueryFnData | undefined) => TQueryFnData` - the [setQueryData](#queryclientsetquerydata) updater function or new data, will be called for each matching queryKey @@ -310,8 +310,8 @@ await queryClient.invalidateQueries( **Options** -- `filters?: QueryFilters`: [Query Filters](./framework/react/guides/filters#query-filters) - - `queryKey?: QueryKey`: [Query Keys](./framework/react/guides/query-keys) +- `filters?: QueryFilters`: [Query Filters](../../framework/react/guides/filters#query-filters) + - `queryKey?: QueryKey`: [Query Keys](../../framework/react/guides/query-keys) - `refetchType?: 'active' | 'inactive' | 'all' | 'none'` - Defaults to `'active'` - When set to `active`, only queries that match the refetch predicate and are actively being rendered via `useQuery` and friends will be refetched in the background. @@ -352,7 +352,7 @@ await queryClient.refetchQueries({ **Options** -- `filters?: QueryFilters`: [Query Filters](./framework/react/guides/filters#query-filters) +- `filters?: QueryFilters`: [Query Filters](../../framework/react/guides/filters#query-filters) - `options?: RefetchOptions`: - `throwOnError?: boolean` - When set to `true`, this method will throw if any of the query refetch tasks fail. @@ -377,7 +377,7 @@ await queryClient.cancelQueries({ queryKey: ['posts'], exact: true }) **Options** -- `filters?: QueryFilters`: [Query Filters](./framework/react/guides/filters#query-filters) +- `filters?: QueryFilters`: [Query Filters](../../framework/react/guides/filters#query-filters) **Returns** @@ -393,7 +393,7 @@ queryClient.removeQueries({ queryKey, exact: true }) **Options** -- `filters?: QueryFilters`: [Query Filters](./framework/react/guides/filters#query-filters) +- `filters?: QueryFilters`: [Query Filters](../../framework/react/guides/filters#query-filters) **Returns** @@ -416,7 +416,7 @@ queryClient.resetQueries({ queryKey, exact: true }) **Options** -- `filters?: QueryFilters`: [Query Filters](./framework/react/guides/filters#query-filters) +- `filters?: QueryFilters`: [Query Filters](../../framework/react/guides/filters#query-filters) - `options?: ResetOptions`: - `throwOnError?: boolean` - When set to `true`, this method will throw if any of the query refetch tasks fail. @@ -439,11 +439,11 @@ if (queryClient.isFetching()) { } ``` -TanStack Query also exports a handy [`useIsFetching`](./framework/react/reference/useIsFetching) hook that will let you subscribe to this state in your components without creating a manual subscription to the query cache. +TanStack Query also exports a handy [`useIsFetching`](../../framework/react/reference/useIsFetching) hook that will let you subscribe to this state in your components without creating a manual subscription to the query cache. **Options** -- `filters?: QueryFilters`: [Query Filters](./framework/react/guides/filters#query-filters) +- `filters?: QueryFilters`: [Query Filters](../../framework/react/guides/filters#query-filters) **Returns** @@ -459,11 +459,11 @@ if (queryClient.isMutating()) { } ``` -TanStack Query also exports a handy [`useIsMutating`](./framework/react/reference/useIsMutating) hook that will let you subscribe to this state in your components without creating a manual subscription to the mutation cache. +TanStack Query also exports a handy [`useIsMutating`](../../framework/react/reference/useIsMutating) hook that will let you subscribe to this state in your components without creating a manual subscription to the mutation cache. **Options** -- `filters: MutationFilters`: [Mutation Filters](./framework/react/guides/filters#mutation-filters) +- `filters: MutationFilters`: [Mutation Filters](../../framework/react/guides/filters#mutation-filters) **Returns** @@ -514,7 +514,7 @@ function Component() { **Options** -- `queryKey: QueryKey`: [Query Keys](./framework/react/guides/query-keys) +- `queryKey: QueryKey`: [Query Keys](../../framework/react/guides/query-keys) - `options: QueryOptions` > As stated in [`getQueryDefaults`](#queryclientgetquerydefaults), the order of registration of query defaults does matter. diff --git a/docs/reference/QueryObserver.md b/docs/reference/QueryObserver.md index 2173ccc6d7..adffa0b730 100644 --- a/docs/reference/QueryObserver.md +++ b/docs/reference/QueryObserver.md @@ -18,4 +18,4 @@ const unsubscribe = observer.subscribe((result) => { **Options** -The options for the `QueryObserver` are exactly the same as those of [`useQuery`](./framework/react/reference/useQuery). +The options for the `QueryObserver` are exactly the same as those of [`useQuery`](../../framework/react/reference/useQuery). From 643553a14b3a6d4cdf15049cdebd316b8fc115df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Tue, 9 Apr 2024 23:18:58 +0200 Subject: [PATCH 3/8] Fix one more link --- docs/framework/angular/guides/caching.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/framework/angular/guides/caching.md b/docs/framework/angular/guides/caching.md index e2cfe9d824..dcec44c533 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) before reading this guide +> Please thoroughly read the [Important Defaults](../important-defaults) before reading this guide ## Basic Example From 425c62584684441fc7ed83a950020c4b12094c08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Tue, 9 Apr 2024 23:24:30 +0200 Subject: [PATCH 4/8] Another one --- docs/framework/angular/guides/invalidations-from-mutations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/framework/angular/guides/invalidations-from-mutations.md b/docs/framework/angular/guides/invalidations-from-mutations.md index 362ecd7797..3c37172fce 100644 --- a/docs/framework/angular/guides/invalidations-from-mutations.md +++ b/docs/framework/angular/guides/invalidations-from-mutations.md @@ -40,4 +40,4 @@ export class TodosComponent { [//]: # 'Example2' -You can wire up your invalidations to happen using any of the callbacks available in the [`injectMutation` function](./mutations) +You can wire up your invalidations to happen using any of the callbacks available in the [`injectMutation` function](../mutations) From f13ac2e789b9d5611d9d605291651275fe99c11f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Wed, 10 Apr 2024 22:49:47 +0200 Subject: [PATCH 5/8] Update a link --- docs/framework/angular/guides/caching.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/framework/angular/guides/caching.md b/docs/framework/angular/guides/caching.md index dcec44c533..369df58c3a 100644 --- a/docs/framework/angular/guides/caching.md +++ b/docs/framework/angular/guides/caching.md @@ -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`](../injectQuery) 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/injectQuery) 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**). From c0b6ea2dd41481f3e9f86f24e2aa356801e4497e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Thu, 11 Apr 2024 20:22:26 +0200 Subject: [PATCH 6/8] Fix the broken links in the Angular docs --- docs/framework/angular/overview.md | 2 +- docs/framework/react/guides/dependent-queries.md | 2 +- docs/framework/react/guides/initial-query-data.md | 4 ++-- docs/framework/react/guides/mutations.md | 2 +- docs/framework/react/guides/placeholder-query-data.md | 2 +- docs/framework/react/guides/query-options.md | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/framework/angular/overview.md b/docs/framework/angular/overview.md index 6eb488aeef..ebb2e8907b 100644 --- a/docs/framework/angular/overview.md +++ b/docs/framework/angular/overview.md @@ -114,4 +114,4 @@ type Response = { ## You talked me into it, so what now? -- Learn Angular Query at your own pace with our amazingly thorough [Walkthrough Guide](./installation) and [API Reference](../injectQuery) +- Learn Angular Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/injectQuery) diff --git a/docs/framework/react/guides/dependent-queries.md b/docs/framework/react/guides/dependent-queries.md index 55162d1ddf..acbf4584d5 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), 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](../../../react/guides/request-waterfalls), 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/initial-query-data.md b/docs/framework/react/guides/initial-query-data.md index e4cbb978d4..5e5b624a26 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) - - [Manually place the data into the cache using `queryClient.setQueryData`](../prefetching) + - [Prefetch the data using `queryClient.prefetchQuery`](../../../react/guides/prefetching) + - [Manually place the data into the cache using `queryClient.setQueryData`](../../../react/guides/prefetching) ## Using `initialData` to prepopulate a query diff --git a/docs/framework/react/guides/mutations.md b/docs/framework/react/guides/mutations.md index 0db09d7373..cc8f099d53 100644 --- a/docs/framework/react/guides/mutations.md +++ b/docs/framework/react/guides/mutations.md @@ -343,7 +343,7 @@ queryClient.resumePausedMutations() ### Persisting Offline mutations -If you persist offline mutations with the [persistQueryClient plugin](../../plugins/persistQueryClient), 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](../../../react/plugins/persistQueryClient), 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`. diff --git a/docs/framework/react/guides/placeholder-query-data.md b/docs/framework/react/guides/placeholder-query-data.md index 0fd8087ddd..c71955edc9 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) + - [Prefetch or fetch the data using `queryClient` and the `placeholderData` option](../../../react/guides/prefetching) 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. diff --git a/docs/framework/react/guides/query-options.md b/docs/framework/react/guides/query-options.md index 08c80c0311..e9e702d294 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#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](../../../react/typescript#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' From 20e767d0d638f4788fb59fa55de534a195e90e37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Thu, 11 Apr 2024 20:38:31 +0200 Subject: [PATCH 7/8] Fix the broken links in the Vue docs --- docs/framework/react/guides/migrating-to-v5.md | 2 +- docs/framework/vue/overview.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/framework/react/guides/migrating-to-v5.md b/docs/framework/react/guides/migrating-to-v5.md index a98874d54e..5fd686c250 100644 --- a/docs/framework/react/guides/migrating-to-v5.md +++ b/docs/framework/react/guides/migrating-to-v5.md @@ -492,7 +492,7 @@ See the [useQueries docs](../../reference/useQueries#combine) for more details. ### Experimental `fine grained storage persister` -See the [experimental_createPersister docs](../../plugins/createPersister) for more details. +See the [experimental_createPersister docs](../../../react/plugins/createPersister) for more details. [//]: # 'FrameworkSpecificNewFeatures' diff --git a/docs/framework/vue/overview.md b/docs/framework/vue/overview.md index 113d3bfbb9..31c8da66ff 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' From 85ccfa484a643ad60806a6185bf37547192b7adb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?= Date: Thu, 11 Apr 2024 20:50:18 +0200 Subject: [PATCH 8/8] Fix the Svelte links in the docs --- docs/framework/svelte/overview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/framework/svelte/overview.md b/docs/framework/svelte/overview.md index 6b5125cd30..d86765aca1 100644 --- a/docs/framework/svelte/overview.md +++ b/docs/framework/svelte/overview.md @@ -49,7 +49,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 @@ -71,4 +71,4 @@ Svelte Query offers useful functions and components that will make managing serv Svelte Query offers an API similar to React Query, but there are some key differences to be mindful of. - Many of the functions in Svelte Query return a Svelte store. To access values on these stores reactively, you need to prefix the store with a `$`. You can learn more about Svelte stores [here](https://svelte.dev/tutorial/writable-stores). -- If your query or mutation depends on variables, you must use a store for the options. You can read more about this [here](./reactivity). +- If your query or mutation depends on variables, you must use a store for the options. You can read more about this [here](../reactivity).