Is it a "good" plan to use both react router and tanstack query (or other)?

[bouteillerAlan]

Hello, I ask this question because I have the impression that both of them overlap.

For example, both of them can handle idle state or loading component:

function Todos() {
  const { isPending, isError, data, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  })

  if (isPending) {
    return <span>Loading...</span>
  }

  if (isError) {
    return <span>Error: {error.message}</span>
  }

  // We can assume by this point that `isSuccess === true`
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

// route("products/:pid", "./product.tsx");
import type { Route } from "./+types/product";

export async function clientLoader({
  params,
}: Route.ClientLoaderArgs) {
  const res = await fetch(`/api/products/${params.pid}`);
  const product = await res.json();
  return product;
}

// HydrateFallback is rendered while the client loader is running
export function HydrateFallback() {
  return <div>Loading...</div>;
}

export default function Product({
  loaderData,
}: Route.ComponentProps) {
  const { name, description } = loaderData;
  return (
    <div>
      <h1>{name}</h1>
      <p>{description}</p>
    </div>
  );
}

It's one example, but the main question I have is, let's say for a project with tanstack query, should I get react router in framework mode or just in declarative mode, and if yes for the framework should this implementation correct:

• using react router only for basic routing and clientLoader (without HydrateFallback)
• using tanstack query for all the api call, the data cache and so on + the idle status

The only advantage I see on the framework mode is the SSR in this case.

Not sure if I'm clear here, I have read both doc today, and maybe I overcomplicate it.

[GabenGar]

Well if you "need" SSR for some reason then react router can't be just a basic router in there.
Unless you want to coordinate all the "fun" stuff of hybrid render logic, plus a bunch of errors arising from trying interop between TankStack and RR.

[bouteillerAlan]

yeah seem pretty logic now that I have taken a coffee 👍