In solidjs how to config TanStack Query on a TanStack Start project

[bhscer]

Hi guys I'm using solidjs and I have configured the TanStack start. Now I want to add TanStack Query in my project, since that we don't have a example using start+query with solidjs, so I tried to learn from the react example https://github.com/TanStack/router/blob/main/examples/react/start-basic-react-query.

But it seems that in react, file routes/__root.tsx 's RootDocument component needn't a wrapped QueryClientProvider (I don't know why), so we can create the queryClient in file router.tsx 's getRouter function as a Router Context.

But in solidjs I tried to create queryClient also in getRouter function, and without wrapping the QueryClientProvider , the SolidQueryDevtools throws a error to let me use QueryClientProvider. Since I have created the queryClient in router.tsx , how can I access the queryClient in file routes/__root.tsx 's RootDocument component ?

Here is my code:

routes.tsx

import { createRouter } from "@tanstack/solid-router";
import { QueryClient } from "@tanstack/solid-query";
import { routeTree } from "./routeTree.gen";

function NotFoundPage() {
  return <div>Hello "/NotFoundPage"!</div>;
}

export function getRouter() {
  const queryClient = new QueryClient();

  const router = createRouter({
    routeTree,
    context: { queryClient },
    scrollRestoration: true,
    defaultNotFoundComponent: NotFoundPage,
  });

  return router;
}

declare module "@tanstack/solid-router" {
  interface Register {
    router: ReturnType<typeof getRouter>;
  }
}

route/__root.tsx

/// <reference types="vite/client" />
import type * as Solid from "solid-js";
import {
  Outlet,
  createRootRoute,
  HeadContent,
  Scripts,
  createFileRoute,
  createRootRouteWithContext,
  useRouteContext,
} from "@tanstack/solid-router";
import indexCss from "@/index.css?url";
import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
import { SolidQueryDevtools } from "@tanstack/solid-query-devtools";
import { Show } from "solid-js";
import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools";

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
}>()({
  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      {
        title: import.meta.env.VITE_SITE_NAME,
      },
    ],
    links: [{ rel: "stylesheet", href: indexCss }],
  }),
  component: RootComponent,
});

const canShowDevtools = (() => {
  return import.meta.env.DEV;
})();

function RootComponent() {
// I need to access the `queryClient` here
  return (
    <RootDocument>
      {/* <QueryClientProvider> */}
      <Outlet />
      <Show when={canShowDevtools}>
        <TanStackRouterDevtools position="bottom-right" />
        <SolidQueryDevtools buttonPosition="bottom-left" />
      </Show>
      {/* </QueryClientProvider> */}
    </RootDocument>
  );
}

function RootDocument({ children }: Readonly<{ children: Solid.JSX.Element }>) {
  return (
    <>
      <HeadContent />
      {children}
      <Scripts />
    </>
  );
}

[bhscer]

Ok I have find a easy way to solve this problem, but I'm not sure if it is the best way

function RootComponent() {
  const ctx = Route.useRouteContext();
  return (
    <RootDocument>
      <QueryClientProvider client={ctx().queryClient}>
        <Outlet />
        <Show when={canShowDevtools}>
          <TanStackRouterDevtools position="bottom-right" />
          <SolidQueryDevtools buttonPosition="bottom-left" />
        </Show>
      </QueryClientProvider>
    </RootDocument>
  );
}