diff --git a/src/router.tsx b/src/router.tsx index db590df..38c3694 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -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: () => , defaultErrorComponent: ({ error }) => , - }) + }); setupRouterSsrQueryIntegration({ router, - queryClient - }) + queryClient, + }); - return router + return router; } -declare module '@tanstack/solid-router' { +declare module "@tanstack/solid-router" { interface Register { - router: ReturnType + router: ReturnType; } } diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index f398e24..39dcdb2 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -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
Error: {error.message}
; } -export const Route = createRootRouteWithContext()({ +export const Route = createRootRouteWithContext()({ head: () => ({ links: [{ rel: "stylesheet", href: styleCss }], }), @@ -29,6 +34,7 @@ export const Route = createRootRouteWithContext()({ }); function RootComponent() { + const context = Route.useRouteContext(); return ( @@ -36,14 +42,16 @@ function RootComponent() { - - -
- - + + + +
+ + - - + + + diff --git a/src/routes/todo.tsx b/src/routes/todo.tsx index 4a43719..93feb16 100644 --- a/src/routes/todo.tsx +++ b/src/routes/todo.tsx @@ -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 (
- Loading...}> + Loading...
}>
Error: {query.error?.message}