Skip to content

Commit d8b1026

Browse files
DamianOsipiukDamianOsipiuk
authored
fix(devtools): vue2 infinite loop (#60)
* fix(devtools): vue2 infinite loop * docs: rename base example to basic * docs(example): vue 2.x example fixed and renamed * build: codesandbox build links
1 parent 3a363fd commit d8b1026

33 files changed

+1857
-86
lines changed

‎.codesandbox/ci.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"packages": ["./"],
33
"sandboxes": [
4-
"/examples/base",
5-
"/examples/basic-vue-2.x",
4+
"/examples/basic",
5+
"/examples/2.x-basic",
66
"/examples/nuxt-simple"
77
],
88
"node": "14"

‎docs/_sidebar.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
- Examples
99

1010
- [Simple](examples/simple.md)
11-
- [Basic](examples/base.md)
11+
- [Basic](examples/basic.md)
1212
- [Multi Page](examples/multi-page.md)
1313
- [Suspense (experimental)](examples/suspense.md)
1414
- [Vue 2.x (experimental)](examples/vue-2.x.md)

‎docs/examples/base.md‎ renamed to ‎docs/examples/basic.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
- [Open in Codesandbox](https://codesandbox.io/s/github/DamianOsipiuk/vue-query/tree/main/examples/base)
2-
- [View Source](https://github.com/DamianOsipiuk/vue-query/tree/main/examples/base)
1+
- [Open in Codesandbox](https://codesandbox.io/s/github/DamianOsipiuk/vue-query/tree/main/examples/basic)
2+
- [View Source](https://github.com/DamianOsipiuk/vue-query/tree/main/examples/basic)
33

4-
<iframe src="https://codesandbox.io/embed/github/DamianOsipiuk/vue-query/tree/main/examples/base?hidenavigation=1&view=preview&codemirror=1"
4+
<iframe src="https://codesandbox.io/embed/github/DamianOsipiuk/vue-query/tree/main/examples/basic?hidenavigation=1&view=preview&codemirror=1"
55
style="height:700px; border:0; overflow:hidden;"
66
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
77
></iframe>

‎docs/examples/vue-2.x.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
- [Open in Codesandbox](https://codesandbox.io/s/github/DamianOsipiuk/vue-query/tree/main/examples/basic-vue-2.x)
2-
- [View Source](https://github.com/DamianOsipiuk/vue-query/tree/main/examples/basic-vue-2.x)
1+
- [Open in Codesandbox](https://codesandbox.io/s/github/DamianOsipiuk/vue-query/tree/main/examples/2.x-basic)
2+
- [View Source](https://github.com/DamianOsipiuk/vue-query/tree/main/examples/2.x-basic)
33

4-
<iframe src="https://codesandbox.io/embed/github/DamianOsipiuk/vue-query/tree/main/examples/basic-vue-2.x?hidenavigation=1&view=preview&codemirror=1"
4+
<iframe src="https://codesandbox.io/embed/github/DamianOsipiuk/vue-query/tree/main/examples/2.x-basic?hidenavigation=1&view=preview&codemirror=1"
55
style="height:700px; border:0; overflow:hidden;"
66
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
77
></iframe>

‎examples/base/.gitignore‎ renamed to ‎examples/2.x-basic/.gitignore‎

File renamed without changes.

‎examples/base/README.md‎ renamed to ‎examples/2.x-basic/README.md‎

File renamed without changes.

‎examples/base/index.html‎ renamed to ‎examples/2.x-basic/index.html‎

File renamed without changes.

‎examples/2.x-basic/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"private": true,
3+
"scripts": {
4+
"dev": "vite",
5+
"build": "vite build",
6+
"build:dev": "vite build -m development",
7+
"serve": "vite preview"
8+
},
9+
"dependencies": {
10+
"@vue/composition-api": "^1.0.4",
11+
"vue": "^2.6.14",
12+
"vue-query": ">=1.0.0",
13+
"vue-template-compiler": "^2.6.14"
14+
},
15+
"devDependencies": {
16+
"typescript": "^4.3.5",
17+
"vite": "~2.3.8",
18+
"vite-plugin-vue2": "^1.7.3",
19+
"vue-demi": "^0.11.2"
20+
}
21+
}

‎examples/2.x-basic/src/App.vue‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script lang="ts">
2+
import { defineComponent, ref } from "@vue/composition-api";
3+
import { useQueryProvider } from "vue-query";
4+
import { VueQueryDevTools } from "vue-query/devtools";
5+
6+
import Posts from "./Posts.vue";
7+
import Post from "./Post.vue";
8+
9+
export default defineComponent({
10+
name: "App",
11+
components: { Posts, Post, VueQueryDevTools },
12+
setup() {
13+
useQueryProvider();
14+
15+
const visitedPosts = ref(new Set());
16+
const isVisited = (id: number) => visitedPosts.value.has(id);
17+
18+
const postId = ref(-1);
19+
const setPostId = (id: number) => {
20+
visitedPosts.value.add(id);
21+
postId.value = id;
22+
};
23+
24+
return {
25+
isVisited,
26+
postId,
27+
setPostId,
28+
};
29+
},
30+
});
31+
</script>
32+
33+
<template>
34+
<div>
35+
<h1>Vue Query - Basic</h1>
36+
<p>
37+
As you visit the posts below, you will notice them in a loading state the
38+
first time you load them. However, after you return to this list and click
39+
on any posts you have already visited again, you will see them load
40+
instantly and background refresh right before your eyes!
41+
<strong>
42+
(You may need to throttle your network speed to simulate longer loading
43+
sequences)
44+
</strong>
45+
</p>
46+
<Post
47+
v-if="postId > -1"
48+
:postId="postId"
49+
:style="{}"
50+
@setPostId="setPostId"
51+
/>
52+
<Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
53+
<VueQueryDevTools :initialIsOpen="true" />
54+
</div>
55+
</template>

‎examples/2.x-basic/src/Post.vue‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<script lang="ts">
2+
import { defineComponent, toRaw } from "@vue/composition-api";
3+
import { useQuery } from "vue-query";
4+
5+
import { Post } from "./types";
6+
7+
const fetcher = async (id: number): Promise<Post> =>
8+
await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
9+
(response) => response.json()
10+
);
11+
12+
export default defineComponent({
13+
name: "Post",
14+
props: {
15+
postId: {
16+
type: Number,
17+
required: true,
18+
},
19+
},
20+
emits: ["setPostId"],
21+
setup(props) {
22+
const { isLoading, isError, isFetching, data, error } = useQuery(
23+
["post", { postId: toRaw(props.postId) }],
24+
() => fetcher(toRaw(props.postId))
25+
);
26+
27+
return { isLoading, isError, isFetching, data, error };
28+
},
29+
});
30+
</script>
31+
32+
<template>
33+
<div>
34+
<h1>Post {{ postId }}</h1>
35+
<a @click="$emit('setPostId', -1)" href="#"> Back </a>
36+
<div v-if="isLoading" class="update">Loading...</div>
37+
<div v-else-if="isError">An error has occurred: {{ error }}</div>
38+
<div v-else-if="data">
39+
<h1>{{ data.title }}</h1>
40+
<div>
41+
<p>{{ data.body }}</p>
42+
</div>
43+
<div v-if="isFetching" class="update">Background Updating...</div>
44+
</div>
45+
</div>
46+
</template>
47+
48+
<style scoped>
49+
.update {
50+
font-weight: bold;
51+
color: green;
52+
}
53+
</style>

0 commit comments

Comments
 (0)