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

24
src/routes/__root.tsx
View File

@@ -5,6 +5,7 @@ import {
createRootRouteWithContext, createRootRouteWithContext,
} from "@tanstack/solid-router"; } from "@tanstack/solid-router";
import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools"; import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools";
import { QueryClientProvider, QueryClient } from "@tanstack/solid-query";
import "@fontsource/inter/400.css"; import "@fontsource/inter/400.css";
@@ -15,12 +16,16 @@ import styleCss from "~/styles.css?url";
import Header from "~/components/Header"; import Header from "~/components/Header";
import { ThemeProvider } from "~/components/theme-provider"; import { ThemeProvider } from "~/components/theme-provider";
export interface MyRouterContext {
queryClient: QueryClient;
}
export function ErrorComponent({ error }: { error: Error }) { export function ErrorComponent({ error }: { error: Error }) {
console.log(error); console.log(error);
return <div>Error: {error.message}</div>; return <div>Error: {error.message}</div>;
} }
export const Route = createRootRouteWithContext()({ export const Route = createRootRouteWithContext<MyRouterContext>()({
head: () => ({ head: () => ({
links: [{ rel: "stylesheet", href: styleCss }], links: [{ rel: "stylesheet", href: styleCss }],
}), }),
@@ -29,6 +34,7 @@ export const Route = createRootRouteWithContext()({
}); });
function RootComponent() { function RootComponent() {
const context = Route.useRouteContext();
return ( return (
<html> <html>
<head> <head>
@@ -36,14 +42,16 @@ function RootComponent() {
<HeadContent /> <HeadContent />
</head> </head>
<body> <body>
<Suspense> <QueryClientProvider client={context().queryClient}>
<ThemeProvider> <Suspense>
<Header /> <ThemeProvider>
<Outlet /> <Header />
</ThemeProvider> <Outlet />
</ThemeProvider>
<TanStackRouterDevtools /> <TanStackRouterDevtools />
</Suspense> </Suspense>
</QueryClientProvider>
<Scripts /> <Scripts />
</body> </body>
</html> </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 { createFileRoute } from "@tanstack/solid-router";
import { For, Match, Switch } from "solid-js"; 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")({ export const Route = createFileRoute("/todo")({
component: RouteComponent, component: RouteComponent,
loader: ({ context }) =>
context.queryClient.ensureQueryData(todoQueryOptions),
}); });
function RouteComponent() { function RouteComponent() {
const query = useQuery(() => const query = createQuery(() => todoQueryOptions);
queryOptions({
queryKey: ["todo"],
queryFn: () =>
fetch("https://jsonplaceholder.typicode.com/todos").then((res) =>
res.json(),
),
}),
);
return ( return (
<div> <div>
<Switch fallback={<>Loading...</>}> <Switch fallback={<div>Loading...</div>}>
<Match when={query.isError}> <Match when={query.isError}>
<div>Error: {query.error?.message}</div> <div>Error: {query.error?.message}</div>
</Match> </Match>