vt/solid-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Query Client SSR Setup
Some checks failed
Build and Push Docker Image / build (push) Failing after 1s
Details

Browse Source
This commit is contained in:
Konstantin Hintermayer
2026-06-01 16:24:30 +02:00
parent ab272a68ec
commit 2b21ffd170
3 changed files with 46 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/router.tsx
View File

@@ -1,15 +1,14 @@
import { createRouter as createTanStackRouter } from '@tanstack/solid-router'
import { routeTree } from './routeTree.gen'
import { createRouter as createTanStackRouter } from "@tanstack/solid-router";
import { routeTree } from "./routeTree.gen";
// import { getContext } from './integrations/tanstack-query/provider'
import NotFound from './components/NotFound'
import { QueryClient } from '@tanstack/solid-query'
import { ErrorComponent } from './routes/__root'
import { getContext } from './integrations/tanstack-query/provider'
import { setupRouterSsrQueryIntegration } from '@tanstack/solid-router-ssr-query'
import NotFound from "./components/NotFound";
import { QueryClient } from "@tanstack/solid-query";
import { ErrorComponent } from "./routes/__root";
import { getContext } from "./integrations/tanstack-query/provider";
import { setupRouterSsrQueryIntegration } from "@tanstack/solid-router-ssr-query";
const queryClient = new QueryClient()
const queryClient = new QueryClient();
export function getRouter() {
const router = createTanStackRouter({
@@ -18,23 +17,23 @@ export function getRouter() {
context: getContext(),
scrollRestoration: true,
defaultPreload: 'intent',
defaultPreload: "intent",
defaultPreloadStaleTime: 0,
defaultNotFoundComponent: () => <NotFound />,
defaultErrorComponent: ({ error }) => <ErrorComponent error={error} />,
})
});
setupRouterSsrQueryIntegration({
router,
queryClient
})
queryClient,
});
return router
return router;
}
declare module '@tanstack/solid-router' {
declare module "@tanstack/solid-router" {
interface Register {
router: ReturnType<typeof getRouter>
router: ReturnType<typeof getRouter>;
}
}

24
src/routes/__root.tsx
View File

@@ -5,6 +5,7 @@ import {
createRootRouteWithContext,
} from "@tanstack/solid-router";
import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools";
import { QueryClientProvider, QueryClient } from "@tanstack/solid-query";
import "@fontsource/inter/400.css";
@@ -15,12 +16,16 @@ import styleCss from "~/styles.css?url";
import Header from "~/components/Header";
import { ThemeProvider } from "~/components/theme-provider";
export interface MyRouterContext {
queryClient: QueryClient;
}
export function ErrorComponent({ error }: { error: Error }) {
console.log(error);
return <div>Error: {error.message}</div>;
}
export const Route = createRootRouteWithContext()({
export const Route = createRootRouteWithContext<MyRouterContext>()({
head: () => ({
links: [{ rel: "stylesheet", href: styleCss }],
}),
@@ -29,6 +34,7 @@ export const Route = createRootRouteWithContext()({
});
function RootComponent() {
const context = Route.useRouteContext();
return (
<html>
<head>
@@ -36,14 +42,16 @@ function RootComponent() {
<HeadContent />
</head>
<body>
<Suspense>
<ThemeProvider>
<Header />
<Outlet />
</ThemeProvider>
<QueryClientProvider client={context().queryClient}>
<Suspense>
<ThemeProvider>
<Header />
<Outlet />
</ThemeProvider>
<TanStackRouterDevtools />
</Suspense>
<TanStackRouterDevtools />
</Suspense>
</QueryClientProvider>
<Scripts />
</body>
</html>

26
src/routes/todo.tsx
View File

@@ -1,25 +1,29 @@
import { queryOptions, useQuery } from "@tanstack/solid-query";
import { queryOptions, createQuery } from "@tanstack/solid-query";
import { createFileRoute } from "@tanstack/solid-router";
import { For, Match, Switch } from "solid-js";
const todoQueryOptions = queryOptions({
queryKey: ["todo"],
queryFn: () => {
console.log("Fetching todos...");
return fetch("https://jsonplaceholder.typicode.com/todos").then((res) =>
res.json(),
);
},
});
export const Route = createFileRoute("/todo")({
component: RouteComponent,
loader: ({ context }) =>
context.queryClient.ensureQueryData(todoQueryOptions),
});
function RouteComponent() {
const query = useQuery(() =>
queryOptions({
queryKey: ["todo"],
queryFn: () =>
fetch("https://jsonplaceholder.typicode.com/todos").then((res) =>
res.json(),
),
}),
);
const query = createQuery(() => todoQueryOptions);
return (
<div>
<Switch fallback={<>Loading...</>}>
<Switch fallback={<div>Loading...</div>}>
<Match when={query.isError}>
<div>Error: {query.error?.message}</div>
</Match>