📄 tanstack/devtools/latest/docs/framework/solid/examples/basic

====================================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

public
src
- index.tsx
- setup.tsx
.eslintrc.cjs
.gitignore
README.md
index.html
package.json
tsconfig.json
vite.config.ts

tsx

import { render } from 'solid-js/web'
// query imports
import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'

// devtool imports
import { TanStackDevtools } from '@tanstack/solid-devtools'
import { SolidQueryDevtoolsPanel } from '@tanstack/solid-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'

// router implementation
import Router, { router } from './setup'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <h1>TanStack Devtools Solid Basic Example</h1>
      <Router />

      <TanStackDevtools
        config={{
          customTrigger: () => <h1>hello world</h1>,
        }}
        plugins={[\
          {\
            name: 'TanStack Query',\
            render: <SolidQueryDevtoolsPanel />,\
          },\
          {\
            name: 'TanStack Router',\
            render: <TanStackRouterDevtoolsPanel router={router} />,\
          },\
        ]}
      />
    </QueryClientProvider>
  )
}

render(() => <App />, document.getElementById('root')!)


import { render } from 'solid-js/web'
// query imports
import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'

// devtool imports
import { TanStackDevtools } from '@tanstack/solid-devtools'
import { SolidQueryDevtoolsPanel } from '@tanstack/solid-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'

// router implementation
import Router, { router } from './setup'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <h1>TanStack Devtools Solid Basic Example</h1>
      <Router />

      <TanStackDevtools
        config={{
          customTrigger: () => <h1>hello world</h1>,
        }}
        plugins={[\
          {\
            name: 'TanStack Query',\
            render: <SolidQueryDevtoolsPanel />,\
          },\
          {\
            name: 'TanStack Router',\
            render: <TanStackRouterDevtoolsPanel router={router} />,\
          },\
        ]}
      />
    </QueryClientProvider>
  )
}

render(() => <App />, document.getElementById('root')!)

Solid Hooks

Partners Become a Partner