From 570189d2648eb6e5a717d6418978da685458d641 Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Wed, 10 Sep 2025 09:26:46 +0200 Subject: [PATCH 1/2] docs(solid): fix and update solid query example --- docs/config.json | 2 +- examples/solid/basic/package.json | 4 +- examples/solid/basic/src/index.tsx | 32 +++++++++-- examples/solid/basic/src/setup.tsx | 85 ++++++++++++++++-------------- pnpm-lock.yaml | 38 ++++++++----- 5 files changed, 101 insertions(+), 60 deletions(-) diff --git a/docs/config.json b/docs/config.json index 6e4d829e..cba5cea6 100644 --- a/docs/config.json +++ b/docs/config.json @@ -140,4 +140,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/examples/solid/basic/package.json b/examples/solid/basic/package.json index 433d8cec..7b1ed5e0 100644 --- a/examples/solid/basic/package.json +++ b/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.3", "@tanstack/solid-router": "^1.129.8", "@tanstack/solid-router-devtools": "^1.129.8", "solid-js": "^1.9.7" diff --git a/examples/solid/basic/src/index.tsx b/examples/solid/basic/src/index.tsx index dee14b0f..acd824cb 100644 --- a/examples/solid/basic/src/index.tsx +++ b/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 ( -
+

TanStack Devtools Solid Basic Example

- -
+ + + , + }, + { + name: 'TanStack Router', + render: , + }, + ]} + /> + ) } diff --git a/examples/solid/basic/src/setup.tsx b/examples/solid/basic/src/setup.tsx index 3d42407a..cda62dd7 100644 --- a/examples/solid/basic/src/setup.tsx +++ b/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,7 +11,6 @@ import { createRoute, createRouter, } from '@tanstack/solid-router' -import { TanStackDevtools } from '@tanstack/solid-devtools' const rootRoute = createRootRoute({ component: () => ( @@ -17,7 +18,8 @@ const rootRoute = createRootRoute({
Home - {' '} + + About @@ -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(() => ({ + queryKey: ['example-query'], + queryFn: () => { + return new Promise((resolve) => { + setTimeout(() => { + resolve('fetched data') + }, 3000) + }) + }, + })) + return (

Welcome Home!

+ + +

Loading...

+ + + +

{exampleQuery.data}

+ +
) }, }) -function About() { - return ( -
-

Hello from About!

-
- ) -} +/* +/ demo route +*/ const aboutRoute = createRoute({ getParentRoute: () => rootRoute, path: '/about', - component: About, + component: function About() { + return ( +
+

Hello from About!

+
+ ) + }, }) const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]) +export const router = createRouter({ routeTree }) -const router = createRouter({ routeTree }) - -const queryClient = new QueryClient() - -export default function DevtoolsExample() { - return ( - <> - - - - ), - }, - { - name: 'TanStack Router', - render: , - }, - ]} - /> - - - ) +export default function Router() { + return } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6785f583..409ea791 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -411,11 +411,11 @@ importers: specifier: ^0.6.6 version: link:../../../packages/solid-devtools '@tanstack/solid-query': - specifier: ^5.83.0 - version: 5.83.0(solid-js@1.9.7) + specifier: ^5.87.1 + version: 5.87.1(solid-js@1.9.7) '@tanstack/solid-query-devtools': - specifier: ^5.83.0 - version: 5.83.0(@tanstack/solid-query@5.83.0(solid-js@1.9.7))(solid-js@1.9.7) + specifier: ^5.87.3 + version: 5.87.3(@tanstack/solid-query@5.87.1(solid-js@1.9.7))(solid-js@1.9.7) '@tanstack/solid-router': specifier: ^1.129.8 version: 1.130.2(solid-js@1.9.7) @@ -2516,9 +2516,15 @@ packages: '@tanstack/query-core@5.83.0': resolution: {integrity: sha512-0M8dA+amXUkyz5cVUm/B+zSk3xkQAcuXuz5/Q/LveT4ots2rBpPTZOzd7yJa2Utsf8D2Upl5KyjhHRY+9lB/XA==} + '@tanstack/query-core@5.87.1': + resolution: {integrity: sha512-HOFHVvhOCprrWvtccSzc7+RNqpnLlZ5R6lTmngb8aq7b4rc2/jDT0w+vLdQ4lD9bNtQ+/A4GsFXy030Gk4ollA==} + '@tanstack/query-devtools@5.81.2': resolution: {integrity: sha512-jCeJcDCwKfoyyBXjXe9+Lo8aTkavygHHsUHAlxQKKaDeyT0qyQNLKl7+UyqYH2dDF6UN/14873IPBHchcsU+Zg==} + '@tanstack/query-devtools@5.87.3': + resolution: {integrity: sha512-LkzxzSr2HS1ALHTgDmJH5eGAVsSQiuwz//VhFW5OqNk0OQ+Fsqba0Tsf+NzWRtXYvpgUqwQr4b2zdFZwxHcGvg==} + '@tanstack/react-query-devtools@5.83.0': resolution: {integrity: sha512-yfp8Uqd3I1jgx8gl0lxbSSESu5y4MO2ThOPBnGNTYs0P+ZFu+E9g5IdOngyUGuo6Uz6Qa7p9TLdZEX3ntik2fQ==} peerDependencies: @@ -2697,14 +2703,14 @@ packages: resolution: {integrity: sha512-hWsaSgEZAVyzHg8+IcJWCEtfI9ZSlNELErfLiGHG9XCHEXMegFWsrESsKHlASzJqef9RsuOLDl+1IMPIskwdDw==} engines: {node: '>=12'} - '@tanstack/solid-query-devtools@5.83.0': - resolution: {integrity: sha512-Z0wQlAWXz/U2bJ/paMRBTDhMoPnB9Te6GmA21sXnI+nDnAAPZRcPxFBiCgYJS3eFsvbkdRGJwoUSQrdIgy0shg==} + '@tanstack/solid-query-devtools@5.87.3': + resolution: {integrity: sha512-KW8xRqIPtvczWOpmkZHSQuvthae5uXu+2OCSZM5mKM+nqBj8LCdgxf5eK5ErrLN5nsCqeNGPNlr9z3m42KKG3Q==} peerDependencies: - '@tanstack/solid-query': ^5.83.0 + '@tanstack/solid-query': ^5.87.1 solid-js: ^1.6.0 - '@tanstack/solid-query@5.83.0': - resolution: {integrity: sha512-RF8Tv9+6+Kmzj+EafbTzvzzPq+J5SzHtc1Tz3D2MZ/EvlZTH+GL5q4HNnWK3emg7CB6WzyGnTuERmmWJaZs8/w==} + '@tanstack/solid-query@5.87.1': + resolution: {integrity: sha512-ETm+gX1vG8I3nta+u+D68+0VLKMEJsSWantDUPIJLIGjuWmPOWe7ex9HcxRU6HwYHar7kvscY5Uv7msjaa6Bdg==} peerDependencies: solid-js: ^1.6.0 @@ -9565,8 +9571,12 @@ snapshots: '@tanstack/query-core@5.83.0': {} + '@tanstack/query-core@5.87.1': {} + '@tanstack/query-devtools@5.81.2': {} + '@tanstack/query-devtools@5.87.3': {} + '@tanstack/react-query-devtools@5.83.0(@tanstack/react-query@5.83.0(react@19.1.0))(react@19.1.0)': dependencies: '@tanstack/query-devtools': 5.81.2 @@ -9990,15 +10000,15 @@ snapshots: - supports-color - vite - '@tanstack/solid-query-devtools@5.83.0(@tanstack/solid-query@5.83.0(solid-js@1.9.7))(solid-js@1.9.7)': + '@tanstack/solid-query-devtools@5.87.3(@tanstack/solid-query@5.87.1(solid-js@1.9.7))(solid-js@1.9.7)': dependencies: - '@tanstack/query-devtools': 5.81.2 - '@tanstack/solid-query': 5.83.0(solid-js@1.9.7) + '@tanstack/query-devtools': 5.87.3 + '@tanstack/solid-query': 5.87.1(solid-js@1.9.7) solid-js: 1.9.7 - '@tanstack/solid-query@5.83.0(solid-js@1.9.7)': + '@tanstack/solid-query@5.87.1(solid-js@1.9.7)': dependencies: - '@tanstack/query-core': 5.83.0 + '@tanstack/query-core': 5.87.1 solid-js: 1.9.7 '@tanstack/solid-router-devtools@1.130.2(@tanstack/router-core@1.131.32)(@tanstack/solid-router@1.130.2(solid-js@1.9.7))(csstype@3.1.3)(solid-js@1.9.7)(tiny-invariant@1.3.3)': From 5823d71aee447b279b096ae954af696d52c93e71 Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Wed, 10 Sep 2025 09:34:51 +0200 Subject: [PATCH 2/2] fix: sherif --- examples/solid/basic/package.json | 2 +- pnpm-lock.yaml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/solid/basic/package.json b/examples/solid/basic/package.json index 7b1ed5e0..54cd8745 100644 --- a/examples/solid/basic/package.json +++ b/examples/solid/basic/package.json @@ -11,7 +11,7 @@ "dependencies": { "@tanstack/solid-devtools": "^0.6.6", "@tanstack/solid-query": "^5.87.1", - "@tanstack/solid-query-devtools": "^5.87.3", + "@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" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 409ea791..b9f11877 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -414,7 +414,7 @@ importers: specifier: ^5.87.1 version: 5.87.1(solid-js@1.9.7) '@tanstack/solid-query-devtools': - specifier: ^5.87.3 + specifier: ^5.87.1 version: 5.87.3(@tanstack/solid-query@5.87.1(solid-js@1.9.7))(solid-js@1.9.7) '@tanstack/solid-router': specifier: ^1.129.8