docs: clarify setup provider requirements #302
Conversation
|
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.
| 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} />, |
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.
| ```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> |
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.
| ```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')!) |
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.
1 participant
🎯 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
pnpm test:pr.🚀 Release Impact