diff --git a/docs/framework/react/guides/caching.md b/docs/framework/react/guides/caching.md index 1d6ac7d301..2c8220fe43 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](./guides/important-defaults) before reading this guide +> Please thoroughly read the [Important Defaults](../../../../framework/react/guides/important-defaults) before reading this guide ## Basic Example @@ -23,7 +23,7 @@ Let's assume we are using the default `cacheTime` of **5 minutes** and the defau - 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) are updated (including `isFetching`, `isLoading`, 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`](../../../../framework/react/reference/useQuery) are updated (including `isFetching`, `isLoading`, 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 cache timeout is set using `cacheTime` 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 b871c29060..66c2b73941 100644 --- a/docs/framework/react/guides/important-defaults.md +++ b/docs/framework/react/guides/important-defaults.md @@ -15,7 +15,7 @@ Out of the box, TanStack Query is configured with **aggressive but sane** defaul - The network is reconnected - The query is optionally configured with a refetch interval -If you see a refetch that you are not expecting, it is likely because you just focused the window and TanStack Query is doing a [`refetchOnWindowFocus`](./guides/window-focus-refetching). During development, this will probably be triggered more frequently, especially because focusing between the Browser DevTools and your app will also cause a fetch, so be aware of that. +If you see a refetch that you are not expecting, it is likely because you just focused the window and TanStack Query is doing a [`refetchOnWindowFocus`](../window-focus-refetching). During development, this will probably be triggered more frequently, especially because focusing between the Browser DevTools and your app will also cause a fetch, so be aware of that. > To change this functionality, you can use options like `refetchOnMount`, `refetchOnWindowFocus`, `refetchOnReconnect` and `refetchInterval`. @@ -38,7 +38,7 @@ If you see a refetch that you are not expecting, it is likely because you just f Have a look at the following articles from our Community Resources for further explanations of the defaults: -- [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) +- [Practical React Query](../../../../framework/react/community/tkdodos-blog#1-practical-react-query) +- [React Query as a State Manager](../../../../framework/react/community/tkdodos-blog#10-react-query-as-a-state-manager) [//]: # 'Materials' diff --git a/docs/framework/react/guides/infinite-queries.md b/docs/framework/react/guides/infinite-queries.md index f129479c8f..8c443c67f1 100644 --- a/docs/framework/react/guides/infinite-queries.md +++ b/docs/framework/react/guides/infinite-queries.md @@ -138,7 +138,7 @@ refetch({ refetchPage: (page, index) => index === 0 }) [//]: # 'Example2' -You can also pass this function as part of the 2nd argument (`queryFilters`) to [queryClient.refetchQueries](./reference/QueryClient#queryclientrefetchqueries), [queryClient.invalidateQueries](./reference/QueryClient#queryclientinvalidatequeries) or [queryClient.resetQueries](./reference/QueryClient#queryclientresetqueries). +You can also pass this function as part of the 2nd argument (`queryFilters`) to [queryClient.refetchQueries](../../../../reference/QueryClient#queryclientrefetchqueries), [queryClient.invalidateQueries](../../../../reference/QueryClient#queryclientinvalidatequeries) or [queryClient.resetQueries](../../../../reference/QueryClient#queryclientresetqueries). **Signature** diff --git a/docs/framework/react/guides/initial-query-data.md b/docs/framework/react/guides/initial-query-data.md index f26687f9bf..583b8a0bba 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`](./guides/prefetching) - - [Manually place the data into the cache using `queryClient.setQueryData`](./guides/prefetching) + - [Prefetch the data using `queryClient.prefetchQuery`](../prefetching) + - [Manually place the data into the cache using `queryClient.setQueryData`](../prefetching) ## Using `initialData` to prepopulate a query @@ -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](./community/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/invalidations-from-mutations.md b/docs/framework/react/guides/invalidations-from-mutations.md index b7d155ea2c..89063da806 100644 --- a/docs/framework/react/guides/invalidations-from-mutations.md +++ b/docs/framework/react/guides/invalidations-from-mutations.md @@ -36,4 +36,4 @@ const mutation = useMutation({ [//]: # 'Example2' -You can wire up your invalidations to happen using any of the callbacks available in the [`useMutation` hook](./guides/mutations) +You can wire up your invalidations to happen using any of the callbacks available in the [`useMutation` hook](../../../../framework/react/guides/mutations) 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 0fe7dded3d..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](./reference/useQueryErrorResetBoundary) +- [QueryErrorResetBoundary](../../reference/QueryErrorResetBoundary) +- [useQueryErrorResetBoundary](../../reference/useQueryErrorResetBoundary) ### `QueryCache.getQuery()` has been replaced by `QueryCache.find()`. diff --git a/docs/framework/react/guides/mutations.md b/docs/framework/react/guides/mutations.md index 1385b9cfea..87bc4c8a00 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' @@ -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](./guides/invalidations-from-mutations) and even [optimistic updates](./guides/optimistic-updates) +`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) and even [optimistic updates](../optimistic-updates) [//]: # 'Example4' @@ -340,7 +340,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](../../../../framework/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`. @@ -383,13 +383,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](./community/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 33efe387b5..d0a6a74bcb 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](./guides/queries) and [Mutations](./guides/mutations) 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](../../../../framework/react/guides/queries) and [Mutations](../../../../framework/react/guides/mutations) 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` (`loading`, `error`, `success`) it is in if the fetch cannot be made because there is no network connection. However, a [fetchStatus](./guides/queries#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` (`loading`, `error`, `success`) it is in if the fetch cannot be made because there is no network connection. However, a [fetchStatus](../../../../framework/react/guides/queries#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 `loading` state to show a loading spinner. Queries can be in `state: 'loading'`, 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](./guides/query-cancellation) 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](../../../../framework/react/guides/query-cancellation) 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) 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. +The [TanStack Query Devtools](../../../../framework/react/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 3b35856bc7..9ee54d17b1 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](./guides/prefetching) + - [Prefetch or fetch the data using `queryClient` and the `placeholderData` option](../prefetching) ## Placeholder Data as a Value @@ -80,6 +80,6 @@ function Todo({ blogPostId }) { ## Further reading -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). +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 2e667b7f3f..caa53981db 100644 --- a/docs/framework/react/guides/prefetching.md +++ b/docs/framework/react/guides/prefetching.md @@ -25,7 +25,7 @@ const prefetchTodos = async () => { ## Manually Priming a Query -Alternatively, 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. +Alternatively, 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. [//]: # 'Example2' @@ -38,6 +38,6 @@ 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](./community/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. [//]: # 'Materials' diff --git a/docs/framework/react/guides/queries.md b/docs/framework/react/guides/queries.md index 7e2fb26064..b30b14f3c8 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](./guides/mutations) 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) 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 and the `result` object, 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](./guides/network-mode) guide. +- `fetchStatus === 'paused'` - The query wanted to fetch, but it is paused. Read more about this in the [Network Mode](../network-mode) guide. - `fetchStatus === 'idle'` - The query is not doing anything at the moment. ### Why two different states? @@ -140,6 +140,6 @@ So keep in mind that a query can be in `loading` state without actually fetching ## Further Reading -For an alternative way of performing status checks, have a look at the [Community Resources](./community/tkdodos-blog#4-status-checks-in-react-query). +For an alternative way of performing status checks, have a look at the [Community Resources](../../../../framework/react/community/tkdodos-blog#4-status-checks-in-react-query). [//]: # 'Materials' diff --git a/docs/framework/react/guides/query-functions.md b/docs/framework/react/guides/query-functions.md index e36d30663e..ad2f722a57 100644 --- a/docs/framework/react/guides/query-functions.md +++ b/docs/framework/react/guides/query-functions.md @@ -99,12 +99,12 @@ function fetchTodoList({ queryKey }) { The `QueryFunctionContext` is the object passed to each query function. It consists of: -- `queryKey: QueryKey`: [Query Keys](./guides/query-keys) +- `queryKey: QueryKey`: [Query Keys](../query-keys) - `pageParam?: unknown` - - only for [Infinite Queries](./guides/infinite-queries) + - only for [Infinite Queries](../infinite-queries) - the page parameter used to fetch the current page - `signal?: AbortSignal` - [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) instance provided by TanStack Query - - Can be used for [Query Cancellation](./guides/query-cancellation) + - Can be used for [Query Cancellation](../query-cancellation) - `meta: Record | undefined` - an optional field you can fill with additional information about your query diff --git a/docs/framework/react/guides/query-invalidation.md b/docs/framework/react/guides/query-invalidation.md index 93e026181d..7ec2fca22c 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](./guides/filters#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](../../../../framework/react/guides/filters#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 14405da917..1841a72bf6 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](./community/tkdodos-blog#8-effective-react-query-keys) and check the [Query Key Factory Package](./community/lukemorales-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/lukemorales-query-key-factory) from the Community Resources. [//]: # 'Materials' diff --git a/docs/framework/react/guides/ssr.md b/docs/framework/react/guides/ssr.md index bd0f2cede0..f8daebb95d 100644 --- a/docs/framework/react/guides/ssr.md +++ b/docs/framework/react/guides/ssr.md @@ -250,7 +250,7 @@ This guide is at-best, a high level overview of how SSR with React Query should - Dehydrate the client - Render your app with the client provider and also **using the dehydrated state. This is extremely important! You must render both server and client using the same dehydrated state to ensure hydration on the client produces the exact same markup as the server.** - Serialize and embed the dehydrated cache to be sent to the client with the HTML -- Clear the React Query caches after the dehydrated state has been sent by calling [`queryClient.clear()`](./reference/QueryClient#queryclientclear) +- Clear the React Query caches after the dehydrated state has been sent by calling [`queryClient.clear()`](../../../../reference/QueryClient#queryclientclear) > SECURITY NOTE: Serializing data with `JSON.stringify` can put you at risk for XSS-vulnerabilities, [this blog post explains why and how to solve it](https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0) @@ -521,7 +521,7 @@ async function handleRequest(req, res) { ### Client -Make sure to [use suspense in your queries](./guides/suspense). +Make sure to [use suspense in your queries](../../../../framework/react/guides/suspense). ## Tips, Tricks and Caveats @@ -545,6 +545,6 @@ In case you are creating the `QueryClient` for every request, React Query create On the server, `cacheTime` 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 `cacheTime` 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 `cacheTime`. diff --git a/docs/framework/react/guides/suspense.md b/docs/framework/react/guides/suspense.md index 9931a422be..a6b92a2217 100644 --- a/docs/framework/react/guides/suspense.md +++ b/docs/framework/react/guides/suspense.md @@ -100,8 +100,8 @@ const App: React.FC = () => { ## 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](./guides/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, 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) 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. ## Further reading -For tips on using suspense option, check the [Suspensive React Query Package](./community/suspensive-react-query) from the Community Resources. +For tips on using suspense option, check the [Suspensive React Query Package](../../community/suspensive-react-query) from the Community Resources. diff --git a/docs/framework/react/guides/testing.md b/docs/framework/react/guides/testing.md index 5498d1444e..193b0fa69c 100644 --- a/docs/framework/react/guides/testing.md +++ b/docs/framework/react/guides/testing.md @@ -197,5 +197,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](./community/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 592ab09201..9b062408b8 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 f25f1a9bda..9c8145bb08 100644 --- a/docs/framework/react/installation.md +++ b/docs/framework/react/installation.md @@ -19,7 +19,7 @@ $ yarn add @tanstack/react-query React Query is compatible with React v16.8+ and works with ReactDOM and React Native. -> Wanna give it a spin before you download? Try out the [simple](/query/v4/docs/examples/react/simple) or [basic](/query/v4/docs/examples/react/basic) examples! +> Wanna give it a spin before you download? Try out the [simple](/query/v4/docs/framework/react/examples/simple) or [basic](/query/v4/docs/framework/react/examples/basic) examples! ### CDN @@ -50,7 +50,7 @@ Opera >= 53 ### 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 eb2a9dfb2e..2feb19fd84 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://ui.dev/react-query?from=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](./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 e37fed23d6..16b43610b5 100644 --- a/docs/framework/react/plugins/createAsyncStoragePersister.md +++ b/docs/framework/react/plugins/createAsyncStoragePersister.md @@ -28,7 +28,7 @@ yarn add @tanstack/query-async-storage-persister @tanstack/react-query-persist-c - 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`](./plugins/persistQueryClient.md#persistqueryclientprovider) component. +- Wrap your app by using [`PersistQueryClientProvider`](../persistQueryClient#persistqueryclientprovider) component. ```tsx import AsyncStorage from '@react-native-async-storage/async-storage' @@ -62,7 +62,7 @@ export default Root ## Retries -Retries work the same as for a [SyncStoragePersister](./plugins/createSyncStoragePersister), 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), 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 e4f44b73db..2e58b2aa05 100644 --- a/docs/framework/react/plugins/createSyncStoragePersister.md +++ b/docs/framework/react/plugins/createSyncStoragePersister.md @@ -27,7 +27,7 @@ yarn add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-cl - Import the `createSyncStoragePersister` function - Create a new syncStoragePersister -- Pass it to the [`persistQueryClient`](./plugins/persistQueryClient) function +- Pass it to the [`persistQueryClient`](../../plugins/persistQueryClient) 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 ca252ca455..abebe33d78 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](./plugins/createSyncStoragePersister) -- [createAsyncStoragePersister](./plugins/createAsyncStoragePersister) +- [createSyncStoragePersister](../createSyncStoragePersister) +- [createAsyncStoragePersister](../createAsyncStoragePersister) - [create a custom persister](#persisters) ## How It Works @@ -56,7 +56,7 @@ the persister `removeClient()` is called and the cache is immediately discarded. ### `persistQueryClientSave` -- Your query/mutation are [`dehydrated`](./reference/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. @@ -88,7 +88,7 @@ persistQueryClientSubscribe({ ### `persistQueryClientRestore` -- 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. +- 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. @@ -178,7 +178,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' @@ -208,14 +208,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?: () => void` - 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) ### useIsRestoring diff --git a/docs/framework/react/quick-start.md b/docs/framework/react/quick-start.md index 16f430d51d..8c56214612 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) -- [Mutations](./guides/mutations) -- [Query Invalidation](./guides/query-invalidation) +- [Queries](../guides/queries) +- [Mutations](../guides/mutations) +- [Query Invalidation](../guides/query-invalidation) [//]: # 'Example' -If you're looking for a fully functioning example, please have a look at our [simple codesandbox example](./examples/simple) +If you're looking for a fully functioning example, please have a look at our [simple codesandbox example](../examples/simple) ```tsx import { diff --git a/docs/framework/react/reference/useInfiniteQuery.md b/docs/framework/react/reference/useInfiniteQuery.md index 5ca118fdce..ee323f3a51 100644 --- a/docs/framework/react/reference/useInfiniteQuery.md +++ b/docs/framework/react/reference/useInfiniteQuery.md @@ -23,12 +23,12 @@ const { **Options** -The options for `useInfiniteQuery` are identical to the [`useQuery` hook](./reference/useQuery) with the addition of the following: +The options for `useInfiniteQuery` are identical to the [`useQuery` hook](../../../../framework/react/reference/useQuery) 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) + - **Required, but only if no default query function has been defined** [`defaultQueryFn`](../../../../framework/react/guides/default-query-function) - The function that the query will use to request data. - - Receives a [QueryFunctionContext](./guides/query-functions#queryfunctioncontext) + - Receives a [QueryFunctionContext](../../../../framework/react/guides/query-functions#queryfunctioncontext) - Must return a promise that will either resolve data or throw an error. - Make sure you return the data _and_ the `pageParam` if needed for use in the props below. - `getNextPageParam: (lastPage, allPages) => unknown | undefined` @@ -42,7 +42,7 @@ The options for `useInfiniteQuery` are identical to the [`useQuery` hook](./refe **Returns** -The returned properties for `useInfiniteQuery` are identical to the [`useQuery` hook](./reference/useQuery), with the addition of the following and a small difference in `isRefetching`: +The returned properties for `useInfiniteQuery` are identical to the [`useQuery` hook](../../../../framework/react/reference/useQuery), with the addition of the following and a small difference in `isRefetching`: - `data.pages: TData[]` - Array containing all pages. diff --git a/docs/framework/react/reference/useIsFetching.md b/docs/framework/react/reference/useIsFetching.md index 57e2976964..5e06edc436 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#query-filters) +- `filters?: QueryFilters`: [Query Filters](../../../../framework/react/guides/filters#query-filters) - `context?: React.Context` - Use this to use a custom React Query context. Otherwise, `defaultContext` will be used. diff --git a/docs/framework/react/reference/useIsMutating.md b/docs/framework/react/reference/useIsMutating.md index 1faab064c4..fab1fcbcb3 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#mutation-filters) +- `filters?: MutationFilters`: [Mutation Filters](../../../../framework/react/guides/filters#mutation-filters) - `context?: React.Context` - Use this to use a custom React Query context. Otherwise, `defaultContext` will be used. diff --git a/docs/framework/react/reference/useMutation.md b/docs/framework/react/reference/useMutation.md index 0aad101d40..80585a3ede 100644 --- a/docs/framework/react/reference/useMutation.md +++ b/docs/framework/react/reference/useMutation.md @@ -55,7 +55,7 @@ mutate(variables, { - `networkMode: 'online' | 'always' | 'offlineFirst'` - optional - defaults to `'online'` - - see [Network Mode](./guides/network-mode) for more information. + - see [Network Mode](../../../../framework/react/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 @@ -124,7 +124,7 @@ mutate(variables, { - `isIdle`, `isLoading`, `isSuccess`, `isError`: boolean variables derived from `status` - `isPaused: boolean` - will be `true` if the mutation has been `paused` - - see [Network Mode](./guides/network-mode) for more information. + - see [Network Mode](../../../../framework/react/guides/network-mode) for more information. - `data: undefined | unknown` - Defaults to `undefined` - The last successfully resolved data for the query. diff --git a/docs/framework/react/reference/useQueries.md b/docs/framework/react/reference/useQueries.md index fa489d9d76..8ad8db65fd 100644 --- a/docs/framework/react/reference/useQueries.md +++ b/docs/framework/react/reference/useQueries.md @@ -16,7 +16,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](./reference/useQuery) (excluding the `context` option). +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](../../../../framework/react/reference/useQuery) (excluding the `context` option). - `context?: React.Context` - Use this to use a custom React Query context. Otherwise, `defaultContext` will be used. diff --git a/docs/framework/react/reference/useQuery.md b/docs/framework/react/reference/useQuery.md index aef546b74d..1da89daffd 100644 --- a/docs/framework/react/reference/useQuery.md +++ b/docs/framework/react/reference/useQuery.md @@ -67,20 +67,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) for more information. + - The query key will be hashed into a stable hash. See [Query Keys](../../../../framework/react/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. + - **Required, but only if no default query function has been defined** See [Default Query Function](../../../../framework/react/guides/default-query-function) for more information. - The function that the query will use to request data. - - Receives a [QueryFunctionContext](./guides/query-functions#queryfunctioncontext) + - Receives a [QueryFunctionContext](../../../../framework/react/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](./guides/dependent-queries). + - Can be used for [Dependent Queries](../../../../framework/react/guides/dependent-queries). - `networkMode: 'online' | 'always' | 'offlineFirst` - optional - defaults to `'online'` - - see [Network Mode](./guides/network-mode) for more information. + - see [Network Mode](../../../../framework/react/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. @@ -238,7 +238,7 @@ const { - `fetching`: Is `true` whenever the queryFn is executing, which includes initial `loading` 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) for more information. + - see [Network Mode](../../../../framework/react/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 f91f1017d8..ada51a6154 100644 --- a/docs/framework/react/typescript.md +++ b/docs/framework/react/typescript.md @@ -115,8 +115,8 @@ const { error } = useQuery(['groups'], fetchGroups) ## Further Reading -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). +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' [//]: # 'Materials' diff --git a/docs/framework/svelte/installation.md b/docs/framework/svelte/installation.md index c034730bbb..63848d0a8a 100644 --- a/docs/framework/svelte/installation.md +++ b/docs/framework/svelte/installation.md @@ -15,4 +15,4 @@ $ pnpm add @tanstack/svelte-query $ yarn 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 e9c130ed7c..e7bd49eb9b 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 assign it reactively. You can read more about this [here](./reactivity). +- If your query or mutation depends on variables, you must assign it reactively. You can read more about this [here](../reactivity). diff --git a/docs/framework/svelte/ssr.md b/docs/framework/svelte/ssr.md index b74e12e1ed..10816049f6 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 97896c676a..e826b295e6 100644 --- a/docs/framework/vue/guides/ssr.md +++ b/docs/framework/vue/guides/ssr.md @@ -230,6 +230,6 @@ In case you are creating the `QueryClient` for every request, Vue Query creates On the server, `cacheTime` 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 `cacheTime` 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 `cacheTime`. diff --git a/docs/framework/vue/guides/suspense.md b/docs/framework/vue/guides/suspense.md index e6251545ef..5c06d2deb5 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](./guides/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 6a33b7a99e..e78708b4cd 100644 --- a/docs/framework/vue/installation.md +++ b/docs/framework/vue/installation.md @@ -15,7 +15,7 @@ $ pnpm add @tanstack/vue-query $ yarn 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 91e3ed902c..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' diff --git a/docs/framework/vue/quick-start.md b/docs/framework/vue/quick-start.md index c9d8afac81..c10605fe16 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