chore(solid-query): Add devtools to examples (#6132)

Author: ardeora

docs/config.json

@@ -446,6 +446,35 @@
             {
               "label": "Overview",
               "to": "solid/overview"
+            },
+            {
+              "label": "Devtools",
+              "to": "solid/devtools"
+            }
+          ]
+        },
+        {
+          "label": "Examples",
+          "children": [
+            {
+              "label": "Simple",
+              "to": "solid/examples/solid/simple"
+            },
+            {
+              "label": "Basic",
+              "to": "solid/examples/solid/basic-typescript"
+            },
+            {
+              "label": "Basic w/ GraphQL-Request",
+              "to": "solid/examples/solid/basic-graphql-request"
+            },
+            {
+              "label": "Default Query Function",
+              "to": "solid/examples/solid/default-query-function"
+            },
+            {
+              "label": "Solid Start",
+              "to": "solid/examples/solid/solid-start-streaming"
             }
           ]
         }

examples/solid/basic-graphql-request/package.json

@@ -10,6 +10,7 @@
   "license": "MIT",
   "dependencies": {
     "@tanstack/solid-query": "^5.0.0-rc.1",
+    "@tanstack/solid-query-devtools": "^5.0.0-rc.9",
     "graphql": "^16.6.0",
     "graphql-request": "^6.1.0",
     "solid-js": "^1.7.8"

examples/solid/basic-graphql-request/src/index.tsx

@@ -4,6 +4,7 @@ import {
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/solid-query'
+import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
 import type { Accessor, Setter } from 'solid-js'
 import { createSignal, For, Match, Switch } from 'solid-js'
 import { render } from 'solid-js/web'
@@ -18,6 +19,7 @@ function App() {
 
   return (
     <QueryClientProvider client={queryClient}>
+      <SolidQueryDevtools />
       <p>
         As you visit the posts below, you will notice them in a loading state
         the first time you load them. However, after you return to this list and

examples/solid/basic-typescript/package.json

@@ -10,6 +10,7 @@
   "license": "MIT",
   "dependencies": {
     "@tanstack/solid-query": "^5.0.0-rc.1",
+    "@tanstack/solid-query-devtools": "^5.0.0-rc.9",
     "solid-js": "^1.7.8"
   },
   "devDependencies": {

examples/solid/basic-typescript/src/index.tsx

@@ -4,6 +4,7 @@ import {
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/solid-query'
+import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
 import type { Component, Setter } from 'solid-js'
 import { createSignal, For, Match, Switch } from 'solid-js'
 import { render } from 'solid-js/web'
@@ -138,6 +139,7 @@ const App: Component = () => {
 
   return (
     <QueryClientProvider client={queryClient}>
+      <SolidQueryDevtools />
       <p>
         As you visit the posts below, you will notice them in a loading state
         the first time you load them. However, after you return to this list and

examples/solid/default-query-function/package.json

@@ -10,6 +10,7 @@
   "license": "MIT",
   "dependencies": {
     "@tanstack/solid-query": "^5.0.0-rc.1",
+    "@tanstack/solid-query-devtools": "^5.0.0-rc.9",
     "solid-js": "^1.7.8"
   },
   "devDependencies": {

examples/solid/default-query-function/src/index.tsx

@@ -5,6 +5,7 @@ import {
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/solid-query'
+import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
 import type { Setter } from 'solid-js'
 import { createSignal, For, Match, Show, Switch } from 'solid-js'
 import { render } from 'solid-js/web'
@@ -34,6 +35,7 @@ function App() {
 
   return (
     <QueryClientProvider client={queryClient}>
+      <SolidQueryDevtools />
       <p>
         As you visit the posts below, you will notice them in a loading state
         the first time you load them. However, after you return to this list and

examples/solid/simple/package.json

@@ -10,6 +10,7 @@
   "license": "MIT",
   "dependencies": {
     "@tanstack/solid-query": "^5.0.0-rc.1",
+    "@tanstack/solid-query-devtools": "^5.0.0-rc.9",
     "solid-js": "^1.7.8"
   },
   "devDependencies": {

examples/solid/simple/src/index.tsx

@@ -4,6 +4,7 @@ import {
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/solid-query'
+import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
 import { Match, Switch } from 'solid-js'
 import { render } from 'solid-js/web'
 
@@ -12,6 +13,7 @@ const queryClient = new QueryClient()
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
+      <SolidQueryDevtools />
       <Example />
     </QueryClientProvider>
   )

examples/solid/solid-start-streaming/package.json

@@ -14,6 +14,7 @@
     "@solidjs/meta": "^0.28.2",
     "@solidjs/router": "^0.7.0",
     "@tanstack/solid-query": "^5.0.0-rc.1",
+    "@tanstack/solid-query-devtools": "^5.0.0-rc.9",
     "solid-js": "^1.7.8",
     "solid-start": "^0.2.23",
     "undici": "^5.22.1"