AnteG Posts - Answer Overflow

AnteG

•Created by AnteG on 2/6/2024 in #support

[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();
}

5 replies

Gaming

Programming