How can use apollo-client in new react-router loader pattern?

[loki4reddit]

New react-router announced new feature that called action and loader, but they are pure function so i can’t use hooks (ex) uesQuery). I can send client i to singleton object but i’m not sure that is good approach. Give me some ideas!

[JeffAuriemma]

Hi @loki4reddit welcome to the community forum! Have you seen this post yet?

How to load data with react router dom v6 and handling errorpage?

Hi all, react-router-dom v6 has now a loader property and an “ErrorPage” property. The tutorial is here: Root.jsx import { Outlet, Link } from "react-router-dom"; import { getContacts } from "../contacts"; export async function loader() { const contacts = await getContacts(); return { contacts }; } Main.jsx import Root, { loader as rootLoader } from "./routes/root"; const router = createBrowserRouter([ { path: "/", element: <Root />, errorElement: <ErrorPage />, loa…

There are some sample code snippets in there that might be of use

[loki4reddit]

Thanks for your help , but this question is written after i already saw that example. I’m in curious about use hook inside of loader. But hook only support use in component. I’m wondering in this situation what kind of alternative exist thanks!

[Steve_Tsala]

The preloading feature has been added in the 3.9.0. It’s still experimental but already considered as production ready. It works great with react router loaders pattern. You could check the doc, test it and provide your feedback here #11519. It’ll be stabilized in the 3.10.0 version.
Thanks