Skip to content

docs: clarify setup provider requirements #302

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.

Sign up for GitHub

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

Open
brandon93s wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: clarify setup provider requirements #302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 20 additions & 8 deletions docs/framework/preact/basic-setup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,23 @@ Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/preact-d
npm i @tanstack/preact-devtools
```

Next in the root of your application import the `TanStackDevtools` from the required framework adapter (in this case @tanstack/preact-devtools).
Next, render the `TanStackDevtools` inside the providers required by the plugins you use (for example, `QueryClientProvider`). If you use TanStack Router devtools, you must pass the router instance to the router panel.

```tsx
import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
import { TanStackDevtools } from '@tanstack/preact-devtools'
import { render } from 'preact'

import App from './App'

const queryClient = new QueryClient()

render(
<>
<QueryClientProvider client={queryClient}>
<App />

<TanStackDevtools />
</>,
</QueryClientProvider>,
document.getElementById('root')!,
)
```
Expand All @@ -42,24 +45,33 @@ Currently TanStack offers:

```tsx
import { render } from 'preact'

import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
import { TanStackDevtools } from '@tanstack/preact-devtools'
import { PreactQueryDevtoolsPanel } from '@tanstack/preact-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/preact-router-devtools'

import App from './App'

const queryClient = new QueryClient()
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} />,
Comment on lines +56 to +70
Copy link

Copilot AI Jan 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
},
]}
/>
</>,
</QueryClientProvider>,
document.getElementById('root')!,
)
```
Expand Down
64 changes: 38 additions & 26 deletions docs/framework/react/basic-setup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,26 @@ Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/react-de
npm i @tanstack/react-devtools
```

Next in the root of your application import the `TanStackDevtools` from the required framework adapter (in this case @tanstack/react-devtools).
Next, render the `TanStackDevtools` inside the providers required by the plugins you use (for example, `QueryClientProvider`). If you use TanStack Router devtools, you must pass the router instance to the router panel.

```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>
Comment on lines 18 to +35
Copy link

Copilot AI Jan 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
</StrictMode>,
)
```
Expand All @@ -39,37 +47,41 @@ Currently TanStack offers:
- `FormDevtools` [coming soon](https://github.com/TanStack/form/pull/1692)

```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 { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { ReactFormDevtoolsPanel } from '@tanstack/react-form-devtools'

import { routeTree } from './routeTree.gen'

import App from './App'
const queryClient = new QueryClient()
const router = createRouter({ routeTree })

createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />

<TanStackDevtools
plugins={[
{
name: 'TanStack Query',
render: <ReactQueryDevtoolsPanel />,
},
{
name: 'TanStack Router',
render: <TanStackRouterDevtoolsPanel />,
},
{
name: 'TanStack Form',
render: <ReactFormDevtoolsPanel />,
},
]}
/>
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
<TanStackDevtools
plugins={[
{
name: 'TanStack Query',
render: <ReactQueryDevtoolsPanel />,
},
{
name: 'TanStack Router',
render: <TanStackRouterDevtoolsPanel router={router} />,
},
{
name: 'TanStack Form',
render: <ReactFormDevtoolsPanel />,
},
]}
/>
</QueryClientProvider>
</StrictMode>,
)
```
Expand Down
45 changes: 28 additions & 17 deletions docs/framework/solid/basic-setup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,25 @@ Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/solid-de
npm i @tanstack/solid-devtools
```

Next in the root of your application import the `TanStackDevtools` from the required framework adapter (in this case @tanstack/solid-devtools).
Next, render the `TanStackDevtools` inside the providers required by the plugins you use (for example, `QueryClientProvider`). If you use TanStack Router devtools, you must pass the router instance to the router panel.

```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')!)
Comment on lines 18 to +34
Copy link

Copilot AI Jan 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
```

Import the desired devtools and provide it to the `TanStackDevtools` component along with a label for the menu.
Expand All @@ -38,33 +43,39 @@ Currently TanStack offers:
- `FormDevtools`

```tsx
import { render } from 'solid-js/web';

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 { SolidQueryDevtoolsPanel } from '@tanstack/solid-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
import { SolidFormDevtoolsPanel } from '@tanstack/solid-form'

import App from './App'
import { routeTree } from './routeTree.gen'

render(() => (
<>
<App />
const queryClient = new QueryClient()
const router = createRouter({ routeTree })

render(() => (
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
<TanStackDevtools
plugins={[
{
name: 'TanStack router',
render: () => <TanStackRouterDevtoolsPanel />,
name: 'TanStack Query',
render: () => <SolidQueryDevtoolsPanel />,
},
{
name: 'TanStack Router',
render: () => <TanStackRouterDevtoolsPanel router={router} />,
},
{
name: 'TanStack Form',
render: () => <SolidFormDevtoolsPanel />,
},
]}
/>
</>
</QueryClientProvider>
), document.getElementById('root')!)
```

Expand Down
31 changes: 22 additions & 9 deletions docs/quick-start.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,20 @@ To get up and running install the correct adapter for your framework:
- **React**: `npm install @tanstack/react-devtools @tanstack/devtools-vite`
- **Solid**: `npm install @tanstack/solid-devtools @tanstack/devtools-vite`

Then import the devtools into the root of your application:
Then render the devtools inside the provider tree required by the plugins you use (for example, `QueryClientProvider`). If you use TanStack Router devtools, you must pass the router instance to the router panel.

```javascript
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { TanStackDevtools } from '@tanstack/react-devtools'

const queryClient = new QueryClient()

function App() {
return (
<>
<QueryClientProvider client={queryClient}>
<YourApp />
<TanStackDevtools />
</>
</QueryClientProvider>
)
}
```
Expand All @@ -41,30 +44,40 @@ export default {
And you're done! If you want to add custom plugins, you can do so by using the `plugins` prop:

```javascript
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { TanStackDevtools } from '@tanstack/react-devtools'

const queryClient = new QueryClient()

function App() {
return (
<>
<QueryClientProvider client={queryClient}>
<YourApp />
<TanStackDevtools plugins={[
// Add your custom plugins here
]} />
</>
</QueryClientProvider>
)
}
```

For example, if you want to add TanStack query & router you could do so in the following way:
For example, if you want to add TanStack Query & Router you could do so in the following way:
```javascript
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { TanStackDevtools } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { RouterProvider, createRouter } from '@tanstack/react-router'

import { routeTree } from './routeTree.gen'

const queryClient = new QueryClient()
const router = createRouter({ routeTree })

function App() {
return (
<QueryClientProvider client={queryClient}>
<YourApp />
<RouterProvider router={router} />
<TanStackDevtools plugins={[
{
name: 'TanStack Query',
Expand All @@ -73,11 +86,11 @@ function App() {
},
{
name: 'TanStack Router',
render: <TanStackRouterDevtoolsPanel />,
render: <TanStackRouterDevtoolsPanel router={router} />,
defaultOpen: false
},
]} />
</QueryClientProvider>
)
}
```
```