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
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
plugins={[
{
name: 'TanStack Query',
render: <SolidQueryDevtoolsPanel />,
},
{
name: 'TanStack Router',
render: <TanStackRouterDevtoolsPanel router={router} />,
},
]}
/>
</QueryClientProvider>
)
}
render(() => <App />, document.getElementById('root')!)
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.