Hi :wave:

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: Soon...

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

Jul 24 '24 18:07 toofff

@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

Aug 01 '24 15:08 ardeora

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

Aug 01 '24 15:08 toofff

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

Aug 01 '24 15:08 ardeora

@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 :smile:

Aug 02 '24 13:08 toofff

Hi @ardeora :wave:

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?

Aug 22 '24 12:08 toofff

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

Aug 27 '24 04:08 ardeora

@ardeora here's my finished contribution. Let me know what you think :pray:

After this pull request, I could implement the DevtoolsPanel component for the other technologies and their documentation.

Aug 29 '24 03:08 toofff

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

Aug 29 '24 22:08 ardeora

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

Aug 30 '24 00:08 toofff

@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

Sep 02 '24 02:09 toofff

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

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

Sep 02 '24 03:09 toofff

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 1c196e5460e2c1b506068889425962828f4ed481. 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.

Sep 02 '24 04:09 nx-cloud[bot]

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

Sep 02 '24 04:09 autofix-ci[bot]

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

Sep 02 '24 04:09 pkg-pr-new[bot]

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

Sep 02 '24 22:09 toofff

@ardeora yes, it is @yanoucrea

Sep 03 '24 10:09 toofff

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

☁️ Nx Cloud Report