Gathering detailed insights and metrics for @react-query-rewind/svelte-query-rewind
Gathering detailed insights and metrics for @react-query-rewind/svelte-query-rewind
DevTool for TanStack Query
Installations
npm install @react-query-rewind/svelte-query-rewindDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
20.17.0
NPM Version
10.8.2
Score
56.5
Supply Chain
87.4
Quality
83.7
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Languages
6
TypeScript
JavaScript
Vue
Svelte
CSS
HTML
TypeScript (41.59%)
JavaScript (37.1%)
Vue (9.3%)
Svelte (5.67%)
CSS (4.35%)
HTML (1.98%)
Developer
Download Statistics
Total Downloads
4,821
Last Day
5
Last Week
6
Last Month
36
Last Year
4,610
GitHub Statistics
NOASSERTION License
64 Stars
369 Commits
1 Forks
3 Watchers
17 Branches
67 Contributors
Updated on Apr 30, 2025
Bundle Size
1.64 kB
Minified
695.00 B
Minified + Gzipped
Maintainers
4
Package Meta Information
Latest Version
1.1.11
Package Id
@react-query-rewind/svelte-query-rewind@1.1.11
Unpacked Size
16.12 kB
Size
5.07 kB
File Count
12
NPM Version
10.8.2
Node Version
20.17.0
Published on
Sep 20, 2024
Total Downloads
Cumulative downloads
Total Downloads
4,821
Last Day
-28.6%
5
Compared to previous day
Last Week
-33.3%
6
Compared to previous week
Last Month
-14.3%
36
Compared to previous month
Last Year
2,084.8%
4,610
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
3
Dev Dependencies
30
@babel/preset-env@babel/preset-react@babel/preset-typescript@rollup/plugin-babel@rollup/plugin-commonjs@rollup/plugin-node-resolve@rollup/plugin-terser@rollup/plugin-typescript@tanstack/react-query@tanstack/react-query-devtools@testing-library/jest-dom@testing-library/react@testing-library/user-event@types/react@types/react-dom@typescript-eslint/eslint-plugin@typescript-eslint/parsereslinteslint-plugin-react-hooksjestjest-environment-jsdomnpm-run-allreactreact-domrolluprollup-plugin-dtsrollup-plugin-peer-deps-externalts-jesttslibtypescript
Technologies
Overview
Svelte Query Rewind introduces a powerful DevTool extension designed to work in conjunction with React Query's built-in DevTools in order to optimize time-traveling through state changes in an application. This open-source extension is tailored to enhance the debugging experience for React Query users, allowing them to explore state changes and component relationships with ease.
Getting Started
Prerequisites
-
React Query installed and in use in your application.
-
Install RQRewind Chrome Extension.
Installation
-
Download npm package into your application as a dev dependency.
1npm i --save-dev @react-query-rewind/svelte-query-rewind -
Import the ReactQueryRewind component into the root of your applicaiton.
1import ReactQueryRewind from '@react-query-rewind/svelte-query-rewind;` -
Place ReactQueryRewind next to the root of your application inside the QueryClientProvider component.
1ReactDOM.createRoot(document.getElementById('root')!).render( 2 <QueryClientProvider client={queryClient}> 3 <App /> 4 <ReactQueryRewind /> 5 </QueryClientProvider> 6); -
Open the Chrome DevTool Extension and start coding!
Features
- Query States: Upon opening RQRewind in Chrome Dev Tools, you will see the Queries tab open with a drop down menu listing the query keys of all the incoming queries. Select the queries that you want to monitor, make changes on the web app, and the changes of query states will be logged as reflected by the growing number above the play bar. Use the play bar to navigate to a particular state snapshot that you would like to inspect.
- State Diff: Toggle on the Diff button to see state changes between each snapshot highlighted. Turn on the switch on top of the page to show only parts of the state that are changed.
- Live UI Change: As you review the state change history, there is also the option to turn on the time travel mode by clicking on the clock icon button. Under time travel mode, when visiting a logged state snapshot on RQRewindl, the UI of the app will change accordingly. Turn off time travel mode for RQRewind to continue logging future state changes.
- Component Tree: Click on the Component Tree tab and turn on the Start Profiling switch. Click on any component on the app, and view the component tree that is rendered on the dev tools panel.
Contact Information
Austin Cavanagh - GitHub - LinkedIn - austin.cavanagh.cs@gmail.com
Emma Teering - GitHub - LinkedIn - teeringe@gmail.com
John Dunn - GitHub - LinkedIn - johnwdunn20@gmail.com
Rui Fan - GitHub - LinkedIn - rfan1986@gmail.com
Links
Project Link: React Query Rewind
Website: reactqueryrewind.com
License
MIT Link
No vulnerabilities found.
No security vulnerabilities found.