/Vueable-query

Chrome extension dev tool to monitor vue-query cache hits and refetching sequences

Primary LanguageTypeScriptMIT LicenseMIT

Vueable-query

Vueable Query Logo

Vueable Query is an easy to use Chrome Extension that provides visualization and performance metrics for programs using Tanstack Query for Vue.

MIT License

Vue Vite Vitest TypeScript D3 Chrome Dev Tool API

Installation

Install Vueable Query from the Chrome Web Store

Developer Installation

  • Clone this repository
  • Run npm install then npm run build to build the extension to the dist folder
  • Then load the dist folder in Google Chrome as an unpacked Chrome Extension

Run Demo Program

  • Clone this repository
  • Run npm run demo
  • Navigate to localhost:5173
  • Open the Chrome developer tool and select Vueable Query Panel

Features

demo

  • A timeline to visualize the query history
  • A text panel to display all relevant queries under their query key.
  • Highlighting on click and hover
  • Tooltip displayed on hover

Usage

  • View a program running Tanstack Query for Vue or load up the example program above
  • Open up the Dev Tools for Chrome
  • Navigate to Vueable Query pane
  • Hover over a timeline point to view information
  • Click a query to highlight it on both views
  • Expand the text entry to see more details