Children route loader not works with react-query

[salicius]

Hi, everyone, I'm following this two guides to build my react app with react-query and react-router-dom
https://tkdodo.eu/blog/react-query-meets-react-router
https://reactrouter.com/en/main/guides/data-libs

However, it appears that react-query's data loaded with one of my Root children's loader are not seen and it returns a failed request error.
The data loads only if i put inside the Root loader a ensureQueryData().

What is wrong with my code ?

myQuery.js :

import axios from "axios";

const instance = axios.create({
  baseURL: "my-DB-url",
});

export const getPizzaQuery = () => ({
  queryKey: ["pizzas"],
  queryFn: async () => {
    const { data } = await instance.get("/Pizzas");
    return data;
  },
});

---

Root.js :

import { Outlet } from "react-router-dom";
import Header from "components/Header";
import { getPizzaQuery } from "myQuery.js";
import { useQuery } from "@tanstack/react-query";

export const loader = (queryClient) => async () => {
  // await queryClient.ensureQueryData(getPizzaQuery());
  return null;
};

export default function Root() {
  return (
    <>
      <Header />
      <Outlet />
    </>
  );
}

---

PizzaPage.js :

import React from "react";
import { getPizzaQuery } from "myQuery.js";
import { useQuery } from "@tanstack/react-query";

export const loader = (queryClient) => async () => {
  const query = getPizzaQuery();
  return (
    queryClient.getQueryData(query.queryKey) ??
    (await queryClient.fetchQuery(query))
  );
};

export default function PizzaPage() {
  const { data: pizzas } = useQuery(getPizzaQuery());

  return (
    <>
      {pizzas?.map((item, index) => (
        <div key={index}>
          {item.StartSlice} / {item.EndSlice}
        </div>
      )) ?? "no pizzas"}
    </>
  );
}

---

App.js :

import Root, { loader as rootLoader } from "pages/Root";
import HomePage from "pages/HomePage";
import PizzaPage, { loader as pizzaPageLoader } from "pages/PizzaPage";
import {
  createBrowserRouter,
  RouterProvider,
  Navigate,
} from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5,
    },
  },
});

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader(queryClient),
    errorElement: <Error />,
    children: [
      { index: true, element: <Navigate to="/homepage" replace /> },
      {
        path: "/homepage",
        element: <HomePage />,
        errorElement: <Error />,
      },
      {
        path: "/pizzapage",
        element: <PizzaPage />,
        loader: pizzaPageLoader(queryClient),
        errorElement: <Error />,
      },
    ],
  },
]);

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  );
};

export default App;

[salicius]

Seems like that this prevent the fetching of the loader, because removing this line it fetch the data as usual:

{ index: true, element: <Navigate to="/homepage" replace /> },

how can i change it to keep working with react-query ?

[salicius]

Seems like only in my React app hosted on SAP it doesn’t load children loader data with axios istance custom baseURL. (maybe its that ? cause if i put the public tynicode api url it works). The app connect to db with vscode run configuration if can help to resolve tje question.
Instead --> baseURL: "https://jsonplaceholder.typicode.com/"
I have --> baseURL: "DB_TELEKOM/My-App"

I recreated sandbox with this code but seems working.
https://codesandbox.io/s/boring-lichterman-kld8wk
only in my react app with axios custom url not work this. Very strange