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

**URL:** <https://community.apollographql.com/t/how-can-use-apollo-client-in-new-react-router-loader-pattern/5388>\
**Category:** Client SDKs\
**Tags:** client, web\
**Created:** [January 5, 2023, 7:31am UTC](https://community.apollographql.com/t/how-can-use-apollo-client-in-new-react-router-loader-pattern/5388 "2023-01-05T07:31:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![loki4reddit](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/loki4reddit/32/3663_2.png) [@loki4reddit](https://community.apollographql.com/u/loki4reddit)\
**Post date:** [January 5, 2023, 7:31am UTC](https://community.apollographql.com/t/how-can-use-apollo-client-in-new-react-router-loader-pattern/5388/1 "2023-01-05T07:31:16Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![JeffAuriemma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jeffauriemma/32/2845_2.png) [@JeffAuriemma](https://community.apollographql.com/u/JeffAuriemma)\
**Post date:** [January 5, 2023, 9:37pm UTC](https://community.apollographql.com/t/how-can-use-apollo-client-in-new-react-router-loader-pattern/5388/2 "2023-01-05T21:37:31Z")

</div>

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?](https://community.apollographql.com/t/how-to-load-data-with-react-router-dom-v6-and-handling-errorpage/5347):
>
> 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 👀

---

<div class="post-metadata">

**Author:** ![loki4reddit](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/loki4reddit/32/3663_2.png) [@loki4reddit](https://community.apollographql.com/u/loki4reddit)\
**Post date:** [January 6, 2023, 6:51am UTC](https://community.apollographql.com/t/how-can-use-apollo-client-in-new-react-router-loader-pattern/5388/3 "2023-01-06T06:51:25Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Steve\_Tsala](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/steve_tsala/32/4959_2.png) [@Steve\_Tsala](https://community.apollographql.com/u/Steve_Tsala)\
**Post date:** [March 10, 2024, 9:43am UTC](https://community.apollographql.com/t/how-can-use-apollo-client-in-new-react-router-loader-pattern/5388/4 "2024-03-10T09:43:53Z")

</div>

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](https://www.apollographql.com/docs/react/data/suspense/#initiating-queries-outside-react), test it and provide your feedback here [#11519](https://github.com/apollographql/apollo-client/issues/11519). It’ll be stabilized in the 3.10.0 version.  
Thanks