-
-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(react-query-dev-tools): Add ReactQueryDevToolsPanel support #7788
feat(react-query-dev-tools): Add ReactQueryDevToolsPanel support #7788
Conversation
@toofff Thanks for working on the devtools panel API! Is this PR good to take a look at? Or do you need any help with it? 😄 I'll be happy to help you if you run into any blockers |
I haven't taken the time to finalize my PR yet, it's not good enough to look at. The logic I had was to add 2 exportable components. I'm going to find some time this week to get back to it and hopefully finish it all off. |
@toofff yeah that's fine. The devtools panel not having a PiP view makes sense because that would ideally be neet to be handled on the user side. Also, no rush at all. Let me know if you have any other questions/concerns! |
ad02732
to
a2def20
Compare
@ardeora I was able to work a bit last night and have a better idea where I'm headed. The The The
At first I just wanted to export the What do you think? Does the vision of my work suit you? Note: If everything is OK for you, I could do the same thing for the other languages that the debug bar supports, but in another pull request 😄 |
a2def20
to
5c326c8
Compare
Hi @ardeora 👋 Here's a first draft of what I'm thinking of doing. I'm not a fan of the drilling props I've set up, so I'm thinking of putting the 4 props directly accessible via the main provider. I think I'd have done all this differently, but I didn't want to redo everything for my first pull request, but it can be improved in a future pull request ;) Could you tell me what you think and if I should finish this as soon as possible? |
@toofff Thanks for working on this. This is looking great! I'll take a look at this today and detailed comments if required! |
89076cc
to
caf0d91
Compare
caf0d91
to
daf5361
Compare
daf5361
to
d52a9ac
Compare
@ardeora here's my finished contribution. Let me know what you think 🙏 After this pull request, I could implement the DevtoolsPanel component for the other technologies and their documentation. |
d52a9ac
to
53fcf57
Compare
@ardeora I'll review and test your pull request tomorrow evening, I don't think I'll have time tonight. Thank you for your feedback. |
191d085
to
8b8e18e
Compare
@ardeora I squashed your 3 commits and did a cherry-pick in my branch. I also corrected:
|
d240d9d
to
0635274
Compare
@ardeora if everything is good for you, you can merge ;) Thank you very much for your help and cooperation in this adventure. 🙏 |
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 1c196e5. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 2 targetsSent with 💌 from NxCloud. |
Hi! I'm autofix.ci, a bot that automatically fixes trivial issues such as code formatting in pull requests. I would like to apply some automated changes to this pull request, but it looks like I don't have the necessary permissions to do so. To get this pull request into a mergeable state, please do one of the following two things:
|
More templates
@tanstack/angular-query-devtools-experimental
@tanstack/eslint-plugin-query
@tanstack/angular-query-experimental
@tanstack/query-async-storage-persister
@tanstack/query-broadcast-client-experimental
@tanstack/query-core
@tanstack/query-devtools
@tanstack/query-persist-client-core
@tanstack/query-sync-storage-persister
@tanstack/react-query
@tanstack/react-query-devtools
@tanstack/react-query-next-experimental
@tanstack/react-query-persist-client
@tanstack/solid-query
@tanstack/solid-query-devtools
@tanstack/solid-query-persist-client
@tanstack/svelte-query-devtools
@tanstack/svelte-query
@tanstack/svelte-query-persist-client
@tanstack/vue-query
@tanstack/vue-query-devtools
commit: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@toofff Everything else looks great! If you could just run pnpm prettier:write
on the root of the project. The format CI will be happy!
New props added to Devtools component for better control - withCloseButton prop: display the close button - withDragPositionPanel prop: can drag position panel - withOpenButton prop: display the open button - withPIPButton prop: display the Picture In Picture button - withPositionButton prop: display the position button Others - revamp architecture - added new react/devtools-panel example - added documentation for the DevtoolsPanelComponent
0635274
to
1c196e5
Compare
@ardeora everything is correct now, tonight I'll be able to start my new pull request for the other technologies and update the respective documentations and examples ;) Thanks a lot for the help, it was much appreciated. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@toofff Thank you so much for working on this. Apologies for taking so long to get it to merge but I appreciate it! Are you on Twitter/X? I would love to mention this feature and give you a shout-out.
@ardeora yes, it is @yanoucrea |
Hi 👋
Since major version 5 of TanstackQuery, the debug bar has been redesigned and much improved. However, support for the DevtoolsPanel component has been lost. The aim of my contribution is to reinstate this component.
Work done in the @tanstack/query-devtools package:
Devtools.tsx
fileDevtoolsComponent
&DevtoolsPanelComponent
private componentsTanstackQueryDevtools
&TanstackQueryDevtoolsPanel
public componentsWork done in the @tanstack/react-query-devtools package:
ReactQueryDevtoolsPanel
componentReactQueryDevtools
component toReactQueryDevtoolsPanel
initialIsOpen
&buttonPosition
propsisOpen
propOthers
examples/react/devtools-panel
examplePS: Don't hesitate to hide white spaces to make proofreading easier.