SolidJSS
SolidJS•12mo ago•
16 replies
danchez

TanStack Query vs Solid Router

I'm looking to use Solidjs for a production app and have a question about a library I typically reach for (TanStack Query) for my SPAs and some of the built-in APIs for Solid Router: query + 
createAsync
.

Is there any reason to use TanStack when Solid Router comes with those built-in? Just wondering if there is something I'm missing because, the query + 
createAsync
 combination if I'm not mistaken provides a lot of the same benefits that TanStack does with request de-deduping and caching by key. Wondering if there are other gaps present that I am not privy to (e.g. easy request refetching/polling on interval or conditional fetching like the enabled field from TanStack Query).

For the visually inclined -- the question is what is the recommendation between these two options and the pros/cons of each:

Option 1:
import { createQuery } from "@tanstack/solid-query";

function SomeComponent() {
  const query = createQuery(() => ({
    queryKey: ["userSession"],
    queryFn: async () => {
      const response = await fetch(...);
      if (!response.ok) throw new Error("Failed to fetch data");
      return response.json()
    },
    enabled: true,
    refetchInterval: 5000,
  }));
}


VS

Option 2:
import { createAsync, query } from "@solidjs/router";
const getUserSession = query(() => fetch(...), "userSession");

function SomeComponent() {
    const session = createAsync(() => getUserSession());
    // do stuff ...
}


P.S. Just throwing it out there but, man, Option 2 look really good haha
Was this page helpful?