You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
By default, Vue Query DevTools are not included in production bundles when `process.env.NODE_ENV === 'production'`, so you don't need to worry about excluding them during a production build.
21
-
22
-
---
23
-
24
-
## Floating Mode
25
-
26
-
Floating Mode will mount the DevTools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the DevTools.
27
-
28
-
Place the following code as high in your Vue app as you can. The closer it is to the root of the page, the better it will work!
29
-
30
-
```vue
31
-
<script lang="ts">
32
-
import { defineComponent } from "vue";
33
-
import { VueQueryDevTools } from "vue-query/devtools";
34
-
35
-
export default defineComponent({
36
-
name: "App",
37
-
components: { VueQueryDevTools },
38
-
});
39
-
</script>
40
-
41
-
<template>
42
-
<VueQueryDevTools />
43
-
</template>
44
-
```
45
-
46
-
### Options
47
-
48
-
-`initialIsOpen: Boolean`
49
-
- Set this `true` if you want the dev tools to default to being open
50
-
-`panelProps: PropsObject`
51
-
- Use this to add props to the panel. For example, you can add `className`, `style` (merge and override default style), etc.
52
-
-`closeButtonProps: PropsObject`
53
-
- Use this to add props to the close button. For example, you can add `className`, `style` (merge and override default style), `onClick` (extend default handler), etc.
54
-
-`toggleButtonProps: PropsObject`
55
-
- Use this to add props to the toggle button. For example, you can add `className`, `style` (merge and override default style), `onClick` (extend default handler), etc.
Copy file name to clipboardExpand all lines: docs/getting-started/overview.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ All main concepts are inherited from the main package. Please also check the [re
9
9
10
10
### Motivation
11
11
12
-
Out of the box Vue does not provide optinionated way of interacting with server data. So developers end up building custom solutions that tend to end up either over-complicated, feature lacking or using global state management libraries that are not designed for this kind of usage.
12
+
Out of the box, Vue applications **do not** come with an opinionated way of fetching or updating data from your components so developers end up building their own ways of fetching data. This usually means component-based state, or using more general purpose state management libraries to store and provide asynchronous data throughout their apps.
13
13
14
14
While most traditional state management libraries are great for working with client state, they are **not so great at working with async or server state**. This is because **server state is totally different**. For starters, server state:
15
15
@@ -18,7 +18,7 @@ While most traditional state management libraries are great for working with cli
18
18
- Implies shared ownership and can be changed by other people without your knowledge
19
19
- Can potentially become "out of date" in your applications if you're not careful
20
20
21
-
Once you grasp the nature of server state in your application, even more challenges will arise as you go, for example:
21
+
Once you grasp the nature of server state in your application, **even more challenges will arise** as you go, for example:
22
22
23
23
- Caching... (possibly the hardest thing to do in programming)
24
24
- Deduping multiple requests for the same data into a single request
<!-- We can assume by this point that `isSuccess === true` -->
37
+
<ul v-else>
38
+
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
39
+
</ul>
40
+
<button @click="onButtonClick">Add Todo</button>
41
+
</template>
42
+
```
43
+
44
+
These three concepts make up most of the core functionality of Vue Query. The next sections of the documentation will go over each of these core concepts in great detail.
> ! Please thoroughly read the [Important Defaults](guides/important-defaults) before reading this guide
2
+
3
+
### Basic Example
4
+
5
+
This caching example illustrates the story and lifecycle of:
6
+
7
+
- Query Instances with and without cache data
8
+
- Background Refetching
9
+
- Inactive Queries
10
+
- Garbage Collection
11
+
12
+
Let's assume we are using the default `cacheTime` of **5 minutes** and the default `staleTime` of **0**.
13
+
14
+
- A new instance of `useQuery(['todos'], fetchTodos)` mounts.
15
+
- Since no other queries have been made with the `['todos']` query key, this query will show a hard loading state and make a network request to fetch the data.
16
+
- When the network request has completed, the returned data will be cached under the `['todos']` key.
17
+
- The hook will mark the data as stale after the configured `staleTime` (defaults to **0**, or immediately).
18
+
- A second instance of `useQuery(['todos'], fetchTodos)` mounts elsewhere.
19
+
- Since the cache already has data for the `['todos']` key from the first query, that data is immediately returned from the cache.
20
+
- The new instance triggers a new network request using its query function.
21
+
Note that regardless of whether both `fetchTodos` query functions are identical or not, both queries' `status` are updated (including `isFetching`, `isLoading`, and other related values) because they have the same query key.
22
+
- 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.
23
+
- Both instances of the `useQuery(['todos'], fetchTodos)` query are unmounted and no longer in use.
24
+
- 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**).
25
+
- Before the cache timeout has completed, another instance of `useQuery(['todos'], fetchTodos)` mounts. The query immediately returns the available cached data while the `fetchTodos` function is being run in the background. When it completes successfully, it will populate the cache with fresh data.
26
+
- The final instance of `useQuery(['todos'], fetchTodos)` unmounts.
27
+
- No more instances of `useQuery(['todos'], fetchTodos)` appear within **5 minutes**.
28
+
- The cached data under the `['todos']` key is deleted and garbage collected.
You can also customize the key under which `QueryClient` will be accessible in Vue context. This can be usefull is you want to avoid name clashing between multiple apps on the same page.
30
+
You can also customize the key under which `QueryClient` will be accessible in Vue context. This can be usefull is you want to avoid name clashing between multiple apps on the same page with Vue2.
31
31
32
32
It works both with default, and custom `QueryClient`
33
33
@@ -53,14 +53,6 @@ To use the custom client key, You have to provide it as a query options
0 commit comments