feat(react-query-dev-tools): Add ReactQueryDevToolsPanel support #7788

toofff · 2024-07-24T18:35:45Z

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:

creation of a contexts folder to set up the 3 current contexts to lighten the Devtools.tsx file
setting up DevtoolsComponent & DevtoolsPanelComponent private components
setting up TanstackQueryDevtools & TanstackQueryDevtoolsPanel public components

Work done in the @tanstack/react-query-devtools package:

creating the ReactQueryDevtoolsPanel component
- copy ReactQueryDevtools component to ReactQueryDevtoolsPanel
- removed initialIsOpen & buttonPosition props
- add isOpen prop

Others

added documentation for the ReactQueryDevtoolsPanel component
added examples/react/devtools-panel example

PS: Don't hesitate to hide white spaces to make proofreading easier.

ardeora · 2024-08-01T15:03:32Z

@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

toofff · 2024-08-01T15:16:28Z

@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.
The Devtools component and the DevtoolsPanel component without the PiPProvider.
Would this logic work for you? @ardeora

I'm going to find some time this week to get back to it and hopefully finish it all off.

ardeora · 2024-08-01T15:33:24Z

@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!

toofff · 2024-08-02T13:13:13Z

@ardeora I was able to work a bit last night and have a better idea where I'm headed.

The @tanstack/react-query-devtools package will export 2 components: ReactQueryDevtools & ReactQueryDevtoolsPanel.

The @tanstack/query-devtools package will also export 2 classes: TanstackQueryDevtools & TanstackQueryDevtoolsPanel.
These 2 classes will use the same Devtools component, but configured differently.

The TanstackQueryDevtoolsPanel class will configure the Devtools component so that:

the open button is no longer present
the close button is no longer present
control buttons will probably no longer be present (e.g. position)
the PIP button is no longer present

At first I just wanted to export the DevtoolsPanel component, but I ran into a lot more problems than I thought. The CSS was all broken, the functionalities more or less functional... So I think the simplest option is to simply disable certain functionality.

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 😄

toofff · 2024-08-22T12:46:29Z

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 also need to disable the basic button that displays or not the debug bar and add a state control to open or not the debug bar panel.

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?

examples/react/basic/src/index.tsx

examples/react/simple/src/index.tsx

ardeora · 2024-08-27T04:54:25Z

@toofff Thanks for working on this. This is looking great! I'll take a look at this today and detailed comments if required!

toofff · 2024-08-29T03:07:18Z

@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.

ardeora · 2024-08-29T22:58:49Z

Hi @toofff I took a look at the changes have made a PR to fix some things. toofff#1
Let me know what you think! I think if everything looks good, we can merge this today/tomorrow whenever things go through

toofff · 2024-08-30T00:33:49Z

@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.

toofff · 2024-09-02T02:52:31Z

@ardeora I squashed your 3 commits and did a cherry-pick in my branch.

I also corrected:

the documentation to remove the isOpen prop from the ReactQueryDevtoolsPanel component
updated the dependencies of the @tanstack/query-example-react-devtools-panel package with the latest versions of Tanstack/Query.
kept the two ReactQueryDevtools & ReactQueryDevtoolsPanel files in the @tanstack/react-query-devtools package

toofff · 2024-09-02T03:33:52Z

@ardeora if everything is good for you, you can merge ;)

Thank you very much for your help and cooperation in this adventure. 🙏

nx-cloud · 2024-09-02T04:06:15Z

☁️ Nx Cloud Report

CI 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 targets

Sent with 💌 from NxCloud.

autofix-ci · 2024-09-02T04:06:56Z

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:

Allow edits by maintainers for your pull request, and then re-trigger CI (for example by pushing a new commit).
Manually fix the issues identified for your pull request (see the GitHub Actions output for details on what I would like to change).

pkg-pr-new · 2024-09-02T04:08:00Z

Open in Stackblitz

More templates

@tanstack/angular-query-devtools-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@7788

@tanstack/eslint-plugin-query

pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-query@7788

@tanstack/angular-query-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-experimental@7788

@tanstack/query-async-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-async-storage-persister@7788

@tanstack/query-broadcast-client-experimental

pnpm add https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@7788

@tanstack/query-core

pnpm add https://pkg.pr.new/@tanstack/query-core@7788

@tanstack/query-devtools

pnpm add https://pkg.pr.new/@tanstack/query-devtools@7788

@tanstack/query-persist-client-core

pnpm add https://pkg.pr.new/@tanstack/query-persist-client-core@7788

@tanstack/query-sync-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-sync-storage-persister@7788

@tanstack/react-query

pnpm add https://pkg.pr.new/@tanstack/react-query@7788

@tanstack/react-query-devtools

pnpm add https://pkg.pr.new/@tanstack/react-query-devtools@7788

@tanstack/react-query-next-experimental

pnpm add https://pkg.pr.new/@tanstack/react-query-next-experimental@7788

@tanstack/react-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/react-query-persist-client@7788

@tanstack/solid-query

pnpm add https://pkg.pr.new/@tanstack/solid-query@7788

@tanstack/solid-query-devtools

pnpm add https://pkg.pr.new/@tanstack/solid-query-devtools@7788

@tanstack/solid-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/solid-query-persist-client@7788

@tanstack/svelte-query-devtools

pnpm add https://pkg.pr.new/@tanstack/svelte-query-devtools@7788

@tanstack/svelte-query

pnpm add https://pkg.pr.new/@tanstack/svelte-query@7788

@tanstack/svelte-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/svelte-query-persist-client@7788

@tanstack/vue-query

pnpm add https://pkg.pr.new/@tanstack/vue-query@7788

@tanstack/vue-query-devtools

pnpm add https://pkg.pr.new/@tanstack/vue-query-devtools@7788

commit: 1c196e5

packages/query-devtools/src/contexts/QueryDevtoolsContext.ts

ardeora

@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

toofff · 2024-09-02T22:22:12Z

@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.

ardeora

@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.

toofff · 2024-09-03T10:42:43Z

@ardeora yes, it is @yanoucrea

github-actions bot added package: react-query-devtools package: query-devtools labels Jul 24, 2024

TkDodo requested a review from ardeora July 26, 2024 13:28

toofff force-pushed the feature/add-react-query-dev-tools-panel branch 6 times, most recently from ad02732 to a2def20 Compare August 2, 2024 12:51

toofff force-pushed the feature/add-react-query-dev-tools-panel branch from a2def20 to 5c326c8 Compare August 22, 2024 12:41

toofff commented Aug 22, 2024

View reviewed changes

examples/react/basic/src/index.tsx Outdated Show resolved Hide resolved

toofff commented Aug 22, 2024

View reviewed changes

examples/react/simple/src/index.tsx Outdated Show resolved Hide resolved

toofff force-pushed the feature/add-react-query-dev-tools-panel branch 4 times, most recently from 89076cc to caf0d91 Compare August 29, 2024 02:17

github-actions bot added the documentation Improvements or additions to documentation label Aug 29, 2024

toofff force-pushed the feature/add-react-query-dev-tools-panel branch from caf0d91 to daf5361 Compare August 29, 2024 02:44

toofff marked this pull request as ready for review August 29, 2024 02:44

toofff force-pushed the feature/add-react-query-dev-tools-panel branch from daf5361 to d52a9ac Compare August 29, 2024 02:49

toofff force-pushed the feature/add-react-query-dev-tools-panel branch from d52a9ac to 53fcf57 Compare August 29, 2024 03:24

toofff force-pushed the feature/add-react-query-dev-tools-panel branch 5 times, most recently from 191d085 to 8b8e18e Compare September 2, 2024 02:50

toofff force-pushed the feature/add-react-query-dev-tools-panel branch 2 times, most recently from d240d9d to 0635274 Compare September 2, 2024 03:32

ardeora reviewed Sep 2, 2024

View reviewed changes

packages/query-devtools/src/contexts/QueryDevtoolsContext.ts Outdated Show resolved Hide resolved

ardeora requested changes Sep 2, 2024

View reviewed changes

toofff and others added 4 commits September 2, 2024 18:17

fix: devtools panel, examples and docs

bbfe1d4

fix: replace the className attribute by the class attribute

9ca7de5

fix: remove isOpen & launch prettier

1c196e5

toofff force-pushed the feature/add-react-query-dev-tools-panel branch from 0635274 to 1c196e5 Compare September 2, 2024 22:17

ardeora approved these changes Sep 2, 2024

View reviewed changes

ardeora merged commit f8ad973 into TanStack:main Sep 2, 2024
6 checks passed

toofff deleted the feature/add-react-query-dev-tools-panel branch September 3, 2024 10:41

arnoud-dv mentioned this pull request Sep 20, 2024

Angular query devtools are included in production builds #8018

Open

hshanjra mentioned this pull request Sep 25, 2024

[Snyk] Upgrade @tanstack/react-query-devtools from 5.37.1 to 5.54.1 hshanjra/nextjs-byp#42

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-query-dev-tools): Add ReactQueryDevToolsPanel support #7788

feat(react-query-dev-tools): Add ReactQueryDevToolsPanel support #7788

toofff commented Jul 24, 2024 •

edited

Loading

ardeora commented Aug 1, 2024

toofff commented Aug 1, 2024 •

edited

Loading

ardeora commented Aug 1, 2024 •

edited

Loading

toofff commented Aug 2, 2024

toofff commented Aug 22, 2024

ardeora commented Aug 27, 2024

toofff commented Aug 29, 2024 •

edited

Loading

ardeora commented Aug 29, 2024

toofff commented Aug 30, 2024

toofff commented Sep 2, 2024 •

edited

Loading

toofff commented Sep 2, 2024

nx-cloud bot commented Sep 2, 2024 •

edited

Loading

autofix-ci bot commented Sep 2, 2024

pkg-pr-new bot commented Sep 2, 2024 •

edited

Loading

ardeora left a comment

toofff commented Sep 2, 2024

ardeora left a comment

toofff commented Sep 3, 2024

feat(react-query-dev-tools): Add ReactQueryDevToolsPanel support #7788

feat(react-query-dev-tools): Add ReactQueryDevToolsPanel support #7788

Conversation

toofff commented Jul 24, 2024 • edited Loading

Work done in the @tanstack/query-devtools package:

Work done in the @tanstack/react-query-devtools package:

Others

ardeora commented Aug 1, 2024

toofff commented Aug 1, 2024 • edited Loading

ardeora commented Aug 1, 2024 • edited Loading

toofff commented Aug 2, 2024

toofff commented Aug 22, 2024

ardeora commented Aug 27, 2024

toofff commented Aug 29, 2024 • edited Loading

ardeora commented Aug 29, 2024

toofff commented Aug 30, 2024

toofff commented Sep 2, 2024 • edited Loading

toofff commented Sep 2, 2024

nx-cloud bot commented Sep 2, 2024 • edited Loading

☁️ Nx Cloud Report

autofix-ci bot commented Sep 2, 2024

pkg-pr-new bot commented Sep 2, 2024 • edited Loading

ardeora left a comment

Choose a reason for hiding this comment

toofff commented Sep 2, 2024

ardeora left a comment

Choose a reason for hiding this comment

toofff commented Sep 3, 2024

toofff commented Jul 24, 2024 •

edited

Loading

toofff commented Aug 1, 2024 •

edited

Loading

ardeora commented Aug 1, 2024 •

edited

Loading

toofff commented Aug 29, 2024 •

edited

Loading

toofff commented Sep 2, 2024 •

edited

Loading

nx-cloud bot commented Sep 2, 2024 •

edited

Loading

pkg-pr-new bot commented Sep 2, 2024 •

edited

Loading