Using TanStack Query with TanStack Router

Question

I have a React Vite project which is set up with TanStack Router by following the docs. I have the following files:

routes/_root.tsx

import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";

const SHOW_DEVTOOLS = false;

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  return (
    <>
      {
        <div className="flex gap-2 bg-white p-2 text-lg font-semibold text-slate-900">
          <Link
            to="/"
            activeProps={{
              className: "font-bold",
            }}
            activeOptions={{ exact: true }}
          >
            Title
          </Link>
        </div>
      }
      <hr />
      <Outlet />
      {SHOW_DEVTOOLS && <TanStackRouterDevtools position="bottom-right" />}
    </>
  );
}

main.tsx

import ReactDOM from "react-dom/client";
import { RouterProvider, createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import "./index.css";

// Set up a Router instance
const router = createRouter({
  routeTree,
  defaultPreload: "intent",
});

// Register things for typesafety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

const rootElement = document.getElementById("app")!;

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(<RouterProvider router={router} />);
}

I don't have an App.tsx since my set up didn't have it.

I want to set up TanStack Query in my project and am following the guide to set it up. It requires me to do the following:

import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

However, I don't have an App.tsx. Where should I set up my QueryClientProvider in order to get it working?

Answer 1

You can simply add it in your main.tsx file, just wrap QueryClientProvider around RouterPovider. A good practice in order to achieve a clear separation of concerns would be to add a providers folder and keep both router provider and query client provider inside it.

root.render(<QueryClientProvider client={queryClient}>
             <RouterProvider router={router} />
            </QueryClientProvider>)