Children route loader not works with react-query

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 :

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

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

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

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

---

Root.js :

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

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

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

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

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

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

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

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

---

PizzaPage.js :

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.SliceId}
        </div>
      ))}
    </>
  );
}

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.SliceId}
        </div>
      ))}
    </>
  );
}

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.SliceId}
        </div>
      ))}
    </>
  );
}

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.SliceId}
        </div>
      ))}
    </>
  );
}

---

App.js :

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

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

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

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

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

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

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

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

Children route loader not works with react-query

Similar Threads

Similar Threads

Similar Threads