Using hooks inside 'createBrowserRouter' 'loader'

[ralph993]

I'm trying to use react-query inside the loader function using createBrowserRouter.

So, what I did was this:

const router = createBrowserRouter([
{
	path: "/",
	element: <Home />,
	loader:
		async ({ _, params }) =>
		() => {
			const { data, isLoading } = useFetchRoute(params);
			if (!isLoading && !data) throw new Response("Not Found", { status: 404 });
			return data;
		},
	}
]);

Is this considered bad practice?

[tkapitein]

It is not possible to use hooks inside loaders. This article could help you integrating with React Query.

[ralph993]

Well, what i did worked, i just wanted to know if that was a bad practice. But it actually worked!

[bvjebin]

I have a similar requirement. I want to get the auth state from redux in the loader to make some decision. As of now I don't find any way to inject that data into the loader. Any help would be appreciated.

[MrBista]

I have this problem too right now, is there solution that you found ?
I would be appreciate if there is way to solve the problem by your way

[vladifel]

I have a similar requirement. Trying to execute some Redux logic inside the loader.

[clementcreusat]

@ralph993 hello !!

Quick question, how did you type useLoaderData in your component ?
Your are using curry function and typescript doesn't like const data = useLoaderData()().

Thanks :)

[ralph993]

yeah, I wasn't using typescript in this project back then, I guess you can extend useLoaderData type so it can accept a Promise.
Keep in mind this is a hack.

Hope this help.