docs(solid): fix and update solid query example (#124)

bumped solid-query-devtools to new version, fixed broken panel, and a
little bit of re-organisation so theres less setup in the file
containing the devtools panel.

Author: harry-whorlow

docs/config.json

@@ -140,4 +140,4 @@
       ]
     }
   ]
-}
+}

examples/solid/basic/package.json

@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@tanstack/solid-devtools": "^0.6.6",
-    "@tanstack/solid-query": "^5.83.0",
-    "@tanstack/solid-query-devtools": "^5.83.0",
+    "@tanstack/solid-query": "^5.87.1",
+    "@tanstack/solid-query-devtools": "^5.87.1",
     "@tanstack/solid-router": "^1.129.8",
     "@tanstack/solid-router-devtools": "^1.129.8",
     "solid-js": "^1.9.7"

examples/solid/basic/src/index.tsx

@@ -1,12 +1,36 @@
 import { render } from 'solid-js/web'
-import Devtools from './setup'
+// 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 (
-    <div>
+    <QueryClientProvider client={queryClient}>
       <h1>TanStack Devtools Solid Basic Example</h1>
-      <Devtools />
-    </div>
+      <Router />
+
+      <TanStackDevtools
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <SolidQueryDevtoolsPanel />,
+          },
+          {
+            name: 'TanStack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+        ]}
+      />
+    </QueryClientProvider>
   )
 }
 

examples/solid/basic/src/setup.tsx

@@ -1,6 +1,8 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
-import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
+import { Match, Switch } from 'solid-js'
+// query imports
+import { useQuery } from '@tanstack/solid-query'
+
+// router imports
 import {
   Link,
   Outlet,
@@ -9,15 +11,15 @@ import {
   createRoute,
   createRouter,
 } from '@tanstack/solid-router'
-import { TanStackDevtools } from '@tanstack/solid-devtools'
 
 const rootRoute = createRootRoute({
   component: () => (
     <>
       <div class="p-2 flex gap-2">
         <Link to="/" class="[&.active]:font-bold">
           Home
-        </Link>{' '}
+        </Link>
+
         <Link to="/about" class="[&.active]:font-bold">
           About
         </Link>
@@ -28,57 +30,62 @@ const rootRoute = createRootRoute({
   ),
 })
 
+/*
+/ demo route
+*/
 const indexRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/',
   component: function Index() {
+    /*
+    / demo query resolves after three seconds and returns string
+    */
+    const exampleQuery = useQuery<string>(() => ({
+      queryKey: ['example-query'],
+      queryFn: () => {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve('fetched data')
+          }, 3000)
+        })
+      },
+    }))
+
     return (
       <div class="p-2">
         <h3>Welcome Home!</h3>
+        <Switch>
+          <Match when={exampleQuery.isLoading}>
+            <p>Loading...</p>
+          </Match>
+
+          <Match when={exampleQuery.data}>
+            <p>{exampleQuery.data}</p>
+          </Match>
+        </Switch>
       </div>
     )
   },
 })
-function About() {
-  return (
-    <div class="p-2">
-      <h3>Hello from About!</h3>
-    </div>
-  )
-}
 
+/*
+/ demo route
+*/
 const aboutRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/about',
-  component: About,
+  component: function About() {
+    return (
+      <div class="p-2">
+        <h3>Hello from About!</h3>
+      </div>
+    )
+  },
 })
 
 const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+export const router = createRouter({ routeTree })
 
-const router = createRouter({ routeTree })
-
-const queryClient = new QueryClient()
-
-export default function DevtoolsExample() {
-  return (
-    <>
-      <TanStackDevtools
-        plugins={[
-          {
-            name: 'TanStack Query',
-            render: (
-              <QueryClientProvider client={queryClient}>
-                <SolidQueryDevtools />
-              </QueryClientProvider>
-            ),
-          },
-          {
-            name: 'TanStack Router',
-            render: <TanStackRouterDevtoolsPanel router={router} />,
-          },
-        ]}
-      />
-      <RouterProvider router={router} />
-    </>
-  )
+export default function Router() {
+  return <RouterProvider router={router} />
 }