Skip to content

Commit 941cf65

Browse files
DamianOsipiukDamianOsipiuk
authored
fix(devtools): vue 3 console warnings when accessing query details (#21)
1 parent a6c7190 commit 941cf65

File tree

3 files changed

+169
-158
lines changed

3 files changed

+169
-158
lines changed

‎src/devtools/active-query-panel/ActiveQueryPanel.vue‎

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { defineComponent, PropType, h } from "vue-demi";
2+
import { defineComponent, PropType, h, isVue2 } from "vue-demi";
33
44
import type { Query } from "react-query/types";
55
@@ -17,6 +17,38 @@ export default defineComponent({
1717
},
1818
},
1919
render() {
20+
const dataExplorer = h(Explorer, {
21+
// Vue3
22+
label: "Data",
23+
value: this.$props.query.state.data,
24+
defaultExpanded: true,
25+
// Vue2
26+
props: {
27+
label: "Data",
28+
value: this.$props.query.state.data,
29+
defaultExpanded: true,
30+
},
31+
});
32+
const dataExplorerSlot = isVue2
33+
? [dataExplorer]
34+
: { default: () => dataExplorer };
35+
36+
const queryExplorer = h(Explorer, {
37+
// Vue3
38+
label: "Query",
39+
value: this.$props.query,
40+
defaultExpanded: { queryKey: true },
41+
// Vue2
42+
props: {
43+
label: "Query",
44+
value: this.$props.query,
45+
defaultExpanded: { queryKey: true },
46+
},
47+
});
48+
const queryExplorerSlot = isVue2
49+
? [queryExplorer]
50+
: { default: () => queryExplorer };
51+
2052
return h(
2153
"div",
2254
{
@@ -49,20 +81,7 @@ export default defineComponent({
4981
title: "Data Explorer",
5082
},
5183
},
52-
[
53-
h(Explorer, {
54-
// Vue3
55-
label: "Data",
56-
value: this.$props.query.state.data,
57-
defaultExpanded: true,
58-
// Vue2
59-
props: {
60-
label: "Data",
61-
value: this.$props.query.state.data,
62-
defaultExpanded: true,
63-
},
64-
}),
65-
]
84+
dataExplorerSlot
6685
),
6786
h(
6887
InfoPanel,
@@ -74,20 +93,7 @@ export default defineComponent({
7493
title: "Query Explorer",
7594
},
7695
},
77-
[
78-
h(Explorer, {
79-
// Vue3
80-
label: "Query",
81-
value: this.$props.query,
82-
defaultExpanded: { queryKey: true },
83-
// Vue2
84-
props: {
85-
label: "Query",
86-
value: this.$props.query,
87-
defaultExpanded: { queryKey: true },
88-
},
89-
}),
90-
]
96+
queryExplorerSlot
9197
),
9298
]
9399
);

‎src/devtools/active-query-panel/QueryActions.vue‎

Lines changed: 92 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { computed, defineComponent, PropType, h } from "vue-demi";
2+
import { computed, defineComponent, PropType, h, isVue2 } from "vue-demi";
33
44
import type { Query } from "react-query/types";
55
@@ -44,6 +44,96 @@ export default defineComponent({
4444
};
4545
},
4646
render() {
47+
const actions = [
48+
h(
49+
"button",
50+
{
51+
class: "action-button",
52+
style: {
53+
background: this.isFetching
54+
? this.theme.grayAlt
55+
: this.theme.active,
56+
cursor: this.isFetching ? "not-allowed" : "pointer",
57+
},
58+
// Vue3
59+
type: "button",
60+
disabled: this.isFetching,
61+
onClick: this.doFetch,
62+
// Vue2
63+
attrs: {
64+
type: "button",
65+
disabled: this.isFetching,
66+
},
67+
on: {
68+
click: this.doFetch,
69+
},
70+
},
71+
"Refetch"
72+
),
73+
h(
74+
"button",
75+
{
76+
class: "action-button",
77+
style: {
78+
background: this.theme.warning,
79+
color: this.theme.inputTextColor,
80+
},
81+
// Vue3
82+
type: "button",
83+
onClick: this.doInvalidate,
84+
// Vue2
85+
attrs: {
86+
type: "button",
87+
},
88+
on: {
89+
click: this.doInvalidate,
90+
},
91+
},
92+
"Invalidate"
93+
),
94+
h(
95+
"button",
96+
{
97+
class: "action-button",
98+
style: {
99+
background: this.theme.gray,
100+
},
101+
// Vue3
102+
type: "button",
103+
onClick: this.doReset,
104+
// Vue2
105+
attrs: {
106+
type: "button",
107+
},
108+
on: {
109+
click: this.doReset,
110+
},
111+
},
112+
"Reset"
113+
),
114+
h(
115+
"button",
116+
{
117+
class: "action-button",
118+
style: {
119+
background: this.theme.danger,
120+
},
121+
// Vue3
122+
type: "button",
123+
onClick: this.doRemove,
124+
// Vue2
125+
attrs: {
126+
type: "button",
127+
},
128+
on: {
129+
click: this.doRemove,
130+
},
131+
},
132+
"Remove"
133+
),
134+
];
135+
const actionsSlot = isVue2 ? actions : { default: () => actions };
136+
47137
return h(
48138
InfoPanel,
49139
{
@@ -54,94 +144,7 @@ export default defineComponent({
54144
title: "Actions",
55145
},
56146
},
57-
[
58-
h(
59-
"button",
60-
{
61-
class: "action-button",
62-
style: {
63-
background: this.isFetching
64-
? this.theme.grayAlt
65-
: this.theme.active,
66-
cursor: this.isFetching ? "not-allowed" : "pointer",
67-
},
68-
// Vue3
69-
type: "button",
70-
disabled: this.isFetching,
71-
onClick: this.doFetch,
72-
// Vue2
73-
attrs: {
74-
type: "button",
75-
disabled: this.isFetching,
76-
},
77-
on: {
78-
click: this.doFetch,
79-
},
80-
},
81-
"Refetch"
82-
),
83-
h(
84-
"button",
85-
{
86-
class: "action-button",
87-
style: {
88-
background: this.theme.warning,
89-
color: this.theme.inputTextColor,
90-
},
91-
// Vue3
92-
type: "button",
93-
onClick: this.doInvalidate,
94-
// Vue2
95-
attrs: {
96-
type: "button",
97-
},
98-
on: {
99-
click: this.doInvalidate,
100-
},
101-
},
102-
"Invalidate"
103-
),
104-
h(
105-
"button",
106-
{
107-
class: "action-button",
108-
style: {
109-
background: this.theme.gray,
110-
},
111-
// Vue3
112-
type: "button",
113-
onClick: this.doReset,
114-
// Vue2
115-
attrs: {
116-
type: "button",
117-
},
118-
on: {
119-
click: this.doReset,
120-
},
121-
},
122-
"Reset"
123-
),
124-
h(
125-
"button",
126-
{
127-
class: "action-button",
128-
style: {
129-
background: this.theme.danger,
130-
},
131-
// Vue3
132-
type: "button",
133-
onClick: this.doRemove,
134-
// Vue2
135-
attrs: {
136-
type: "button",
137-
},
138-
on: {
139-
click: this.doRemove,
140-
},
141-
},
142-
"Remove"
143-
),
144-
]
147+
actionsSlot
145148
);
146149
},
147150
});

‎src/devtools/active-query-panel/QueryDetails.vue‎

Lines changed: 42 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { computed, defineComponent, PropType, h } from "vue-demi";
2+
import { computed, defineComponent, PropType, h, isVue2 } from "vue-demi";
33
44
import type { Query } from "react-query/types";
55
@@ -38,6 +38,46 @@ export default defineComponent({
3838
};
3939
},
4040
render() {
41+
const details = [
42+
h("div", { class: "details-info-line" }, [
43+
h(
44+
"code",
45+
{
46+
class: "details-code",
47+
},
48+
[h("pre", { class: "details-pre" }, this.formattedQueryKey)]
49+
),
50+
h(
51+
"span",
52+
{
53+
class: "details-span",
54+
style: { background: this.statusBackground },
55+
},
56+
this.queryStatusLabel
57+
),
58+
]),
59+
h("div", { class: "details-info-line" }, [
60+
"Observers:",
61+
h(
62+
"code",
63+
{
64+
class: "details-code",
65+
},
66+
this.observersCount
67+
),
68+
]),
69+
h("div", { class: "details-info-line" }, [
70+
"Last Updated:",
71+
h(
72+
"code",
73+
{
74+
class: "details-code",
75+
},
76+
this.updateDate
77+
),
78+
]),
79+
];
80+
const detailsSlot = isVue2 ? details : { default: () => details };
4181
return h(
4282
InfoPanel,
4383
{
@@ -48,45 +88,7 @@ export default defineComponent({
4888
title: "Query Details",
4989
},
5090
},
51-
[
52-
h("div", { class: "details-info-line" }, [
53-
h(
54-
"code",
55-
{
56-
class: "details-code",
57-
},
58-
[h("pre", { class: "details-pre" }, this.formattedQueryKey)]
59-
),
60-
h(
61-
"span",
62-
{
63-
class: "details-span",
64-
style: { background: this.statusBackground },
65-
},
66-
this.queryStatusLabel
67-
),
68-
]),
69-
h("div", { class: "details-info-line" }, [
70-
"Observers:",
71-
h(
72-
"code",
73-
{
74-
class: "details-code",
75-
},
76-
this.observersCount
77-
),
78-
]),
79-
h("div", { class: "details-info-line" }, [
80-
"Last Updated:",
81-
h(
82-
"code",
83-
{
84-
class: "details-code",
85-
},
86-
this.updateDate
87-
),
88-
]),
89-
]
91+
detailsSlot
9092
);
9193
},
9294
});

0 commit comments

Comments
 (0)