{"id":26267589,"url":"https://github.com/oslabs-beta/react-query-rewind","last_synced_at":"2025-03-22T20:07:12.089Z","repository":{"id":208378416,"uuid":"721295828","full_name":"oslabs-beta/react-query-rewind","owner":"oslabs-beta","description":"DevTool for TanStack Query","archived":false,"fork":false,"pushed_at":"2024-09-20T02:31:33.000Z","size":50260,"stargazers_count":62,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-22T11:04:56.458Z","etag":null,"topics":["devtool","devtools","react-query","svelte-query","tanstack","tanstack-query","tanstack-react-query","vue-query"],"latest_commit_sha":null,"homepage":"https://reactqueryrewind.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oslabs-beta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"open-source-labs","custom":["https://donorbox.org/donations-to-oslabs-inc"]}},"created_at":"2023-11-20T19:04:28.000Z","updated_at":"2025-02-19T11:45:09.000Z","dependencies_parsed_at":"2023-12-13T00:31:53.543Z","dependency_job_id":"f1ac206f-fe6c-4876-afac-4b0b5dc05302","html_url":"https://github.com/oslabs-beta/react-query-rewind","commit_stats":null,"previous_names":["oslabs-beta/react-query-rewind"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Freact-query-rewind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Freact-query-rewind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Freact-query-rewind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Freact-query-rewind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oslabs-beta","download_url":"https://codeload.github.com/oslabs-beta/react-query-rewind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244945617,"owners_count":20536297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["devtool","devtools","react-query","svelte-query","tanstack","tanstack-query","tanstack-react-query","vue-query"],"created_at":"2025-03-14T04:17:28.949Z","updated_at":"2025-03-22T20:07:12.068Z","avatar_url":"https://github.com/oslabs-beta.png","language":"TypeScript","funding_links":["https://github.com/sponsors/open-source-labs","https://donorbox.org/donations-to-oslabs-inc"],"categories":[],"sub_categories":[],"readme":"\u003ca id=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/icon.png\" alt=\"Logo\" width=\"250\"/\u003e\n\u003c/p\u003e\n\n# Technologies\n\n[![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E)](https://www.javascript.com/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)](https://reactjs.org/)\n[![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white)](https://html.com/html5/)\n[![Webpack](https://img.shields.io/badge/webpack-%238DD6F9.svg?style=for-the-badge\u0026logo=webpack\u0026logoColor=black)](https://webpack.js.org/)\n[![D3](https://img.shields.io/badge/d3%20js-F9A03C?style=for-the-badge\u0026logo=d3.js\u0026logoColor=white)](https://d3js.org/)\n[![ESLint](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge\u0026logo=eslint\u0026logoColor=white)](https://eslint.org/)\n[![Material UI](https://img.shields.io/badge/Material%20UI-007FFF?style=for-the-badge\u0026logo=mui\u0026logoColor=white)](https://mui.com/)\n[![Jest](https://img.shields.io/badge/Jest-C21325?style=for-the-badge\u0026logo=jest\u0026logoColor=white)](https://jestjs.io/)\n[![Babel](https://img.shields.io/badge/Babel-F9DC3E?style=for-the-badge\u0026logo=babel\u0026logoColor=white)](https://babeljs.io/)\n\n# Overview\n\nReact 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.\n\n# Getting Started\n\n## Prerequisites\n\n1. React Query installed and in use in your application.\n\n2. Install RQRewind Chrome Extension.\n\n   \u003c!-- _link / picture of Extension in Chrome Store_ --\u003e\n\n## Installation\n\n1.  Download npm package into your application.\n\n  **React**\n\n    ```sh\n    npm i -D react-query-rewind\n    ```\n\n  **Svelte**\n\n    ```sh\n    npm i --save-dev @react-query-rewind/svelte-query-rewind\n    ```\n\n  **Vue**\n\n    ```sh\n    npm i --save-dev @react-query-rewind/vue-query-rewind\n    ```\n\n2.  Import the ReactQueryRewind component into the root of your applicaiton.\n\n    ```javascript\n    import ReactQueryRewind from \"react-query-rewind\";\n    ```\n\n    _Note: Some older versions of NextJS default to the commonJS version of the package, causing apps to error_\n    _If you encounter this error, import the component with:_\n    \n    ```javascript\n    import ReactQueryRewind from \"../../node_modules/react-query-rewind/dist/esm/index.js\";\n    ```\n\n    _OR_\n\n    ```javascript\n    import dynamic from 'next/dynamic'\n    const ReactQueryRewind = dynamic(\n      () =\u003e import('react-query-rewind').then((mod) =\u003e mod.default),\n      { ssr: false }\n    )\n    ```\n\n3.  Place ReactQueryRewind next to the root of your application inside the QueryClientProvider component.\n\n    ```javascript\n    ReactDOM.createRoot(document.getElementById('root')!).render(\n      \u003cQueryClientProvider client={queryClient}\u003e\n        \u003cApp /\u003e\n        \u003cReactQueryRewind /\u003e\n      \u003c/QueryClientProvider\u003e\n    );\n    ```\n\n4.  Open the Chrome DevTool Extension and start coding!\n\n       \u003cp align=\"left\"\u003e\n      \u003cimg src=\"https://i.imgur.com/xTEPI20.png\" alt=\"Component Placement\" width=\"600\"/\u003e\n    \u003c/p\u003e\n\n# Features\n\n- \u003cb\u003eQuery States: \u003c/b\u003eUpon 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.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/g8KrqAg.gif\" width='800' style=\"margin-top: 1em; margin-bottom: 1em;\"\u003e\u003c/p\u003e\n\n- \u003cb\u003eState Diff: \u003c/b\u003eToggle 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.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/a8KAgXZ.gif\" width='800' style=\"margin-top: 1em; margin-bottom: 1em;\"\u003e\u003c/p\u003e\n\n- \u003cb\u003eLive UI Change: \u003c/b\u003eAs 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.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/AZ3QGuf.gif\" width='800' style=\"margin-top: 1em; margin-bottom: 1em;\"\u003e\u003c/p\u003e\n\n- \u003cb\u003eComponent Tree: \u003c/b\u003e 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.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/qa5UJTW.gif\" width='800' style=\"margin-top: 1em; margin-bottom: 1em;\"\u003e\u003c/p\u003e\n\n# Contributing\n\nReact Query Rewind values the strength of community involvement. If you're enthusiastic about React Query, time-traveling state, or improving debugging experiences, your contributions are highly appreciated. Whether it's code enhancements, documentation improvements, or innovative feature suggestions, your engagement can play a pivotal role in shaping the future of React Query Rewind. If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag \"enhancement\".\nDon't forget to give the project a star! Thanks again!\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n# Contact Information\n\nAustin Cavanagh - [GitHub](https://github.com/austin-cavanagh) - [LinkedIn](https://www.linkedin.com/in/austincavanagh/) - austin.cavanagh.cs@gmail.com\n\nEmma Teering - [GitHub](https://github.com/eteering) - [LinkedIn](https://www.linkedin.com/in/emma-teering/) - teeringe@gmail.com\n\nJohn Dunn - [GitHub](https://github.com/johnwdunn20) - [LinkedIn](https://www.linkedin.com/in/johnwdunn/) - johnwdunn20@gmail.com\n\nRui Fan - [GitHub](https://github.com/ruifan-IU) - [LinkedIn](https://www.linkedin.com/in/rui-fan-868231299/) - rfan1986@gmail.com\n\n# Links\n\n[![Medium](https://img.shields.io/badge/Medium-12100E?style=for-the-badge\u0026logo=medium\u0026logoColor=white)](https://medium.com/@teeringe/react-query-rewind-time-travel-debugging-made-simple-46aaeeafd497)\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/company/react-query-rewind/)\n\nProject Link: [React Query Rewind](https://github.com/oslabs-beta/react-query-rewind)\n\nWebsite: [reactqueryrewind.com](https://reactqueryrewind.com/)\n\n# License\n[MIT](https://www.mit.edu/~amini/LICENSE.md)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Freact-query-rewind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foslabs-beta%2Freact-query-rewind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Freact-query-rewind/lists"}