docs: clarify setup provider requirements - #302
Conversation
Sorry, something went wrong.
⚠️ No Changeset foundLatest commit: 0bb912d Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset. This PR includes no changesetsWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Click here to learn what changesets are, and how to add one. Click here if you're a maintainer who wants to add a changeset to this PR |
Sorry, something went wrong.
There was a problem hiding this comment.
Pull request overview
This PR clarifies the TanStack Devtools setup documentation by emphasizing that devtools must be rendered inside the appropriate provider tree (e.g., QueryClientProvider) for the plugins being used. The changes update code examples across all framework adapters to demonstrate proper provider nesting and show how to pass required props like the router instance.
Key changes:
- Updated description to explicitly mention provider requirements
- Modified code examples to show complete provider setup with QueryClientProvider and RouterProvider
- Added router instance passing to TanStackRouterDevtoolsPanel where applicable
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| docs/quick-start.md | Updated examples to show QueryClientProvider wrapping and router setup with instance passing |
| docs/framework/solid/basic-setup.md | Added provider setup with QueryClient and Router configuration, showing proper nesting |
| docs/framework/react/basic-setup.md | Added provider setup with QueryClient and Router configuration, showing proper nesting |
| docs/framework/preact/basic-setup.md | Added provider setup attempting to show QueryClient and Router configuration (but references non-existent packages) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Sorry, something went wrong.
| const router = /* create or import your TanStack Router instance */ | ||
|
|
||
| render( | ||
| <> | ||
| <QueryClientProvider client={queryClient}> | ||
| <App /> | ||
|
|
||
| <TanStackDevtools | ||
| plugins={[ | ||
| { | ||
| name: 'Your Plugin', | ||
| render: <YourPluginComponent />, | ||
| name: 'TanStack Query', | ||
| render: <PreactQueryDevtoolsPanel />, | ||
| }, | ||
| { | ||
| name: 'TanStack Router', | ||
| render: <TanStackRouterDevtoolsPanel router={router} />, |
Copilot
AI
Jan 4, 2026
There was a problem hiding this comment.
The router variable is initialized with a comment placeholder but then used in the TanStackRouterDevtoolsPanel. Since '@tanstack/preact-router-devtools' doesn't exist, this entire router-related section should be removed or replaced with an appropriate example for Preact.
Sorry, something went wrong.
| ```tsx | ||
| import { StrictMode } from 'react' | ||
| import { createRoot } from 'react-dom/client' | ||
| import { QueryClient, QueryClientProvider } from '@tanstack/react-query' | ||
| import { RouterProvider, createRouter } from '@tanstack/react-router' | ||
| import { TanStackDevtools } from '@tanstack/react-devtools' | ||
|
|
||
| import App from './App' | ||
| import { routeTree } from './routeTree.gen' | ||
|
|
||
| const queryClient = new QueryClient() | ||
| const router = createRouter({ routeTree }) | ||
|
|
||
| createRoot(document.getElementById('root')!).render( | ||
| <StrictMode> | ||
| <App /> | ||
|
|
||
| <TanStackDevtools /> | ||
| <QueryClientProvider client={queryClient}> | ||
| <RouterProvider router={router} /> | ||
| <TanStackDevtools /> | ||
| </QueryClientProvider> |
Copilot
AI
Jan 4, 2026
There was a problem hiding this comment.
The first basic example now requires TanStack Router setup (routeTree.gen, createRouter, RouterProvider) even though users might only want to use TanStack Query. Consider showing a simpler example that only requires QueryClientProvider first, and then a second example that adds Router for users who need both.
Sorry, something went wrong.
| ```tsx | ||
| import { render } from 'solid-js/web' | ||
| import { QueryClient, QueryClientProvider } from '@tanstack/solid-query' | ||
| import { RouterProvider, createRouter } from '@tanstack/solid-router' | ||
| import { TanStackDevtools } from '@tanstack/solid-devtools' | ||
|
|
||
| import App from './App' | ||
| import { routeTree } from './routeTree.gen' | ||
|
|
||
| createRoot(document.getElementById('root')!).render( | ||
| <StrictMode> | ||
| <App /> | ||
| const queryClient = new QueryClient() | ||
| const router = createRouter({ routeTree }) | ||
|
|
||
| render(() => ( | ||
| <QueryClientProvider client={queryClient}> | ||
| <RouterProvider router={router} /> | ||
| <TanStackDevtools /> | ||
| </StrictMode>, | ||
| ) | ||
| </QueryClientProvider> | ||
| ), document.getElementById('root')!) |
Copilot
AI
Jan 4, 2026
There was a problem hiding this comment.
The first basic example now requires TanStack Router setup (routeTree.gen, createRouter, RouterProvider) even though users might only want to use TanStack Query. Consider showing a simpler example that only requires QueryClientProvider first, and then a second example that adds Router for users who need both.
Sorry, something went wrong.
🎯 Changes
Setup docs currently imply you can place the tools in the root of your app. Clarify setup docs by making it clear the tools need to live inside and/or be configured with the appropriate providers for the libraries you're using.
✅ Checklist
🚀 Release Impact