SolidJS•10mo ago

[SOLVED] Solid Router v11 + TanStack Query issue

I'm migrating my app's solid router from v0.8 to v0.11 (currently the latest version). I'm having a problem making it work together with TanStack Query. Previously, I had my TanStack Query calls inside of route data functions. Now, when migrated to the load functions, when I hover over the component that sends you to the next route, I get the error from TanStack Query: "No QueryClient set, use QueryClientProvider to set one". It seems that TanStack Query is not initialized in the load function. I've also tried wrapping the Routes component with the client provider, but I get the same error. Thanks to all for reading! If anyone has any suggestions regarding this issue, I'd appreciate it. App + Router component:

const queryClient = new QueryClient();

const App: Component = (props: { children?: JSX.Element }) => {
  return (
    <QueryClientProvider client={queryClient}>
      <MetaProvider>
        <AppContextProvider>
          <ToastProvider>
            <AuthProvider>
              <div class="bg-base-300 min-h-screen">{props.children}</div>
            </AuthProvider>
          </ToastProvider>
        </AppContextProvider>
      </MetaProvider>
    </QueryClientProvider>
  );
};

export const Routes = () => {
  return <Router root={App}>{routes}</Router>;
};

const queryClient = new QueryClient();

const App: Component = (props: { children?: JSX.Element }) => {
  return (
    <QueryClientProvider client={queryClient}>
      <MetaProvider>
        <AppContextProvider>
          <ToastProvider>
            <AuthProvider>
              <div class="bg-base-300 min-h-screen">{props.children}</div>
            </AuthProvider>
          </ToastProvider>
        </AppContextProvider>
      </MetaProvider>
    </QueryClientProvider>
  );
};

export const Routes = () => {
  return <Router root={App}>{routes}</Router>;
};

routes.ts in short:

export const routes: RouteDefinition[] = [
  {
    path: "/",
    component: GlobalLayout,
    children: [
      {
        path: "/user",
        component: lazy(() => import("./pages/user/user")),
        load: UserData,
      },
     // ...
}

export const routes: RouteDefinition[] = [
  {
    path: "/",
    component: GlobalLayout,
    children: [
      {
        path: "/user",
        component: lazy(() => import("./pages/user/user")),
        load: UserData,
      },
     // ...
}

UserData:

export function getUserData() {
  return createQuery(() => ({
    queryKey: [QueryKeysType.USER],
    queryFn: fetchMe,
    staleTime: FIVE_MINUTES,
  }));
}

export default function () {
  void getUserData();
}

export function getUserData() {
  return createQuery(() => ({
    queryKey: [QueryKeysType.USER],
    queryFn: fetchMe,
    staleTime: FIVE_MINUTES,
  }));
}

export default function () {
  void getUserData();
}

3 Replies

Brendonovich•10mo ago

I think only contexts defined above yout router are available in load(), but that's ignoring the fact that createQuery isn't meant to be called in load(). use ensureQueryData instead https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientensurequerydata

QueryClient | TanStack Query Docs

QueryClient The QueryClient can be used to interact with a cache:

Massukka•10mo ago

Not sure if same issue, but I just spend hour trying to fix same No QueryClient set, use QueryClientProvider issue. Deleting lockfile and node_modules fixed the error

AnteGOP•10mo ago

Thank you for the answers. I've moved my createQuery to the component level and used the esureQueryData in the load function. I've also added a delay of 1 second to the fetchMe function so I can see does the prefetched cache works as expected. On hover of the link I can see that the ensureQueryData fetches the needed data, but when I actually click to go to the next route createQuery again takes 1 second to respond, instead of returning the prefetched results. Do you have an idea of where could be the issue? As a side note, with this setup, to ensure that there is no error thrown: No QueryClient set, use QueryClientProvider to set one, I needed to wrap the Routes component with the QueryClientProvider, instead of wrapping the App component. It seems that the problem lies on my end. To eliminate all the extraneous noise in my codebase regarding this problem, I've created a fresh Solid.js template with Tanstack Query and Solid Router v0.11. In this simplified setup, everything appears to be functioning correctly. I'm using ensureQueryData in load functions and createQuery in components, allowing me to retrieve cached results from the load function as expected. Here's the repository if anybody is interested in the setup: https://github.com/agazibaric/solid-with-tanstack-query. Thank you for your assistance!

Gaming

Programming

[SOLVED] Solid Router v11 + TanStack Query issue