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.

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

Jump to bottom

Open

brandon93s wants to merge 1 commit into TanStack:main

from brandon93s:docs

Open

docs: clarify setup provider requirements #302

brandon93s wants to merge 1 commit into TanStack:main from brandon93s:docs

Conversation

@brandon93s

Copy link

@brandon93s brandon93s commented Jan 4, 2026

🎯 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

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm test:pr.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

@brandon93s


 setup clarity

0bb912d

Copilot AI review requested due to automatic review settings

January 4, 2026 15:21

@changeset-bot

Copy link

changeset-bot bot commented Jan 4, 2026

⚠️ No Changeset found

Latest 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 changesets

When 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

Copilot started reviewing on behalf of brandon93s

January 4, 2026 15:22

View session

Copilot AI reviewed

Jan 4, 2026

View reviewed changes

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

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

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.

docs/framework/preact/basic-setup.md

Comment on lines +56 to +70

const router = /* create or import your TanStack Router instance */

render(

<QueryClientProviderclient={queryClient}>

<App />

<TanStackDevtools

plugins={[

{

render: <YourPluginComponent />,

render: <PreactQueryDevtoolsPanel />,

{

render: <TanStackRouterDevtoolsPanel router={router} />,

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.

docs/framework/react/basic-setup.md

Comment on lines 18 to +35

```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(

<App />

</QueryClientProvider>

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.

docs/framework/solid/basic-setup.md

Comment on lines 18 to +34

```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 Appfrom './App'

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

createRoot(document.getElementById('root')!).render(

<App />

const queryClient = new QueryClient()

const router = createRouter({ routeTree })

render(() => (

</StrictMode>,

)

</QueryClientProvider>

), document.getElementById('root')!)

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.

Copilot uses AI. Check for mistakes.

Labels

None yet

1 participant

@brandon93s

Uh oh!

docs: clarify setup provider requirements #302

Are you sure you want to change the base?

docs: clarify setup provider requirements #302

Uh oh!

Conversation

@brandon93s brandon93s commented Jan 4, 2026

🎯 Changes

✅ Checklist

🚀 Release Impact

Uh oh!

changeset-bot bot commented Jan 4, 2026

⚠️ No Changeset found

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant