T
TanStack•3y ago
dependent-tan

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;
  },
});
--- 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 />
    </>
  );
}
--- 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>
      ))}
    </>
  );
}
--- 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 />,
      },
    ],
  },
]);
3 Replies
frail-apricot
frail-apricot•3y ago
In PizzaPage.js loader, I believe it should be: 
return (
    // it was getPizzaQuery instead of getQueryData
    queryClient.getQueryData(query.queryKey) ?? 
    (await queryClient.fetchQuery(query))
  );
return (
    // it was getPizzaQuery instead of getQueryData
    queryClient.getQueryData(query.queryKey) ?? 
    (await queryClient.fetchQuery(query))
  );
dependent-tan
dependent-tanOP•3y ago
Sorry, that was just a typo error i did writing this message. I edited it 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
frail-apricot
frail-apricot•3y ago
Do you see the call in the netwok tab of the dev tools? What does it return?

Did you find this page helpful?