@tanstack/vue-query
Version:
Hooks for managing, caching and syncing asynchronous and remote data in Vue
258 lines (257 loc) • 7.95 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/devtools/devtools.ts
var devtools_exports = {};
__export(devtools_exports, {
setupDevtools: () => setupDevtools
});
module.exports = __toCommonJS(devtools_exports);
var import_devtools_api = require("@vue/devtools-api");
var import_match_sorter_utils = require("@tanstack/match-sorter-utils");
var import_query_core = require("@tanstack/query-core");
var import_utils = require("./utils.cjs");
var pluginId = "vue-query";
var pluginName = "Vue Query";
function setupDevtools(app, queryClient) {
(0, import_devtools_api.setupDevtoolsPlugin)(
{
id: pluginId,
label: pluginName,
packageName: "vue-query",
homepage: "https://tanstack.com/query/latest",
logo: "https://raw.githubusercontent.com/TanStack/query/main/packages/vue-query/media/vue-query.svg",
app,
settings: {
baseSort: {
type: "choice",
component: "button-group",
label: "Sort Cache Entries",
options: [
{
label: "ASC",
value: 1
},
{
label: "DESC",
value: -1
}
],
defaultValue: 1
},
sortFn: {
type: "choice",
label: "Sort Function",
options: Object.keys(import_utils.sortFns).map((key) => ({
label: key,
value: key
})),
defaultValue: Object.keys(import_utils.sortFns)[0]
},
onlineMode: {
type: "choice",
component: "button-group",
label: "Online mode",
options: [
{
label: "Online",
value: 1
},
{
label: "Offline",
value: 0
}
],
defaultValue: 1
}
}
},
(api) => {
const initialSettings = api.getSettings();
import_query_core.onlineManager.setOnline(Boolean(initialSettings.onlineMode.valueOf()));
const queryCache = queryClient.getQueryCache();
api.addInspector({
id: pluginId,
label: pluginName,
icon: "api",
nodeActions: [
{
icon: "file_download",
tooltip: "Refetch",
action: (queryHash) => {
var _a;
(_a = queryCache.get(queryHash)) == null ? void 0 : _a.fetch();
}
},
{
icon: "alarm",
tooltip: "Invalidate",
action: (queryHash) => {
const query = queryCache.get(queryHash);
queryClient.invalidateQueries(query);
}
},
{
icon: "settings_backup_restore",
tooltip: "Reset",
action: (queryHash) => {
var _a;
(_a = queryCache.get(queryHash)) == null ? void 0 : _a.reset();
}
},
{
icon: "delete",
tooltip: "Remove",
action: (queryHash) => {
const query = queryCache.get(queryHash);
queryCache.remove(query);
}
},
{
icon: "hourglass_empty",
tooltip: "Force loading",
action: (queryHash) => {
const query = queryCache.get(queryHash);
query.setState({
data: void 0,
status: "pending"
});
}
},
{
icon: "error_outline",
tooltip: "Force error",
action: (queryHash) => {
const query = queryCache.get(queryHash);
query.setState({
data: void 0,
status: "error",
error: new Error("Unknown error from devtools")
});
}
}
]
});
api.addTimelineLayer({
id: pluginId,
label: pluginName,
color: 16767308
});
queryCache.subscribe((event) => {
api.sendInspectorTree(pluginId);
api.sendInspectorState(pluginId);
const queryEvents = [
"added",
"removed",
"updated"
];
if (queryEvents.includes(event.type)) {
api.addTimelineEvent({
layerId: pluginId,
event: {
title: event.type,
subtitle: event.query.queryHash,
time: api.now(),
data: {
queryHash: event.query.queryHash,
...event
}
}
});
}
});
api.on.setPluginSettings((payload) => {
if (payload.key === "onlineMode") {
import_query_core.onlineManager.setOnline(Boolean(payload.newValue));
}
});
api.on.getInspectorTree((payload) => {
if (payload.inspectorId === pluginId) {
const queries = queryCache.getAll();
const settings = api.getSettings();
const filtered = payload.filter ? queries.filter(
(item) => (0, import_match_sorter_utils.rankItem)(item.queryHash, payload.filter).passed
) : [...queries];
const sorted = filtered.sort(
(a, b) => import_utils.sortFns[settings.sortFn](a, b) * settings.baseSort
);
const nodes = sorted.map((query) => {
const stateLabel = (0, import_utils.getQueryStateLabel)(query);
return {
id: query.queryHash,
label: query.queryHash,
tags: [
{
label: `${stateLabel} [${query.getObserversCount()}]`,
textColor: (0, import_utils.getQueryStatusFg)(query),
backgroundColor: (0, import_utils.getQueryStatusBg)(query)
}
]
};
});
payload.rootNodes = nodes;
}
});
api.on.getInspectorState((payload) => {
if (payload.inspectorId === pluginId) {
const query = queryCache.get(payload.nodeId);
if (!query) {
return;
}
payload.state = {
" Query Details": [
{
key: "Query key",
value: query.queryHash
},
{
key: "Query status",
value: (0, import_utils.getQueryStateLabel)(query)
},
{
key: "Observers",
value: query.getObserversCount()
},
{
key: "Last Updated",
value: new Date(query.state.dataUpdatedAt).toLocaleTimeString()
}
],
"Data Explorer": [
{
key: "Data",
value: query.state.data
}
],
"Query Explorer": [
{
key: "Query",
value: query
}
]
};
}
});
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
setupDevtools
});
//# sourceMappingURL=devtools.cjs.map