Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oslabs-beta/vueable-query
Chrome extension dev tool to monitor vue-query cache hits and refetching sequences
https://github.com/oslabs-beta/vueable-query
caching chrome-extension chrome-extensions tanstack-query vue
Last synced: 4 months ago
JSON representation
Chrome extension dev tool to monitor vue-query cache hits and refetching sequences
- Host: GitHub
- URL: https://github.com/oslabs-beta/vueable-query
- Owner: oslabs-beta
- License: mit
- Created: 2023-05-08T17:33:21.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-08T22:37:52.000Z (over 1 year ago)
- Last Synced: 2024-11-02T02:03:46.036Z (4 months ago)
- Topics: caching, chrome-extension, chrome-extensions, tanstack-query, vue
- Language: TypeScript
- Homepage: https://www.vueablequery.com
- Size: 22.7 MB
- Stars: 70
- Watchers: 2
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Vueable-query

Vueable Query is an easy to use Chrome Extension that provides visualization and performance metrics for programs using [Tanstack Query for Vue](https://github.com/TanStack/query).
[](https://github.com/oslabs-beta/Vueable-Query/blob/main/LICENSE)






## Installation
Install Vueable Query from the [Chrome Web Store](https://chrome.google.com/webstore/detail/vueable-query/dnhcogggodnfhnnfimapejbkkihmflaa)## 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

- 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