[✨] Let us use your custom hooks, inside the routeLoader$ too

[Nefcanto]

Is your feature request related to a problem?

I want to centralize some code that is used across many routeLoader$ instances. I'm using custom hooks to do that. And inside my custom hook, I'm using your hooks to access URL data (query string in this case).

But I get this error:

Code(20): Calling a 'use*()' method outside 'component$(() => { HERE })' is not allowed. 'use*()' methods provide hooks to the 'component$' state and lifecycle, ie 'use' hooks can only be called synchronously within the 'component$' function or another 'use' method.
For more information see: https://qwik.builder.io/docs/components/tasks/#use-method-rules

The error message is crystal clear. I should use your hooks only inside component$. However, a lot of times we need to centralize code in our many routeLoader$ functions too. I have created an instance for this:

stackblitz

I know that I can access requestEvent from inside the routeLoader$ and pass it to my custom hook. I know that. But that's not clean.

Please let us write this code:

const getData = routeLoader$(() => {
    const data = useCustomHook()
});

const useCustomHook = () => {
    const location = useLocation()
    // rest of the code
}

Describe the solution you'd like

I would like to be able to call your custom hooks inside our custom hooks, and then use our custom hooks inside the routeLoader$ function.

Describe alternatives you've considered

For now, we repeat ourselves. We write this code in every page and in every layout code:

const { url } = useLocation()
const locale = url.searchParams.get('locale')
if (!locale) {
     // loading the default locale from config file in some lines of code
}

Additional context

Please see the example link above and uncomment the getData function in the index.tsx file.

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-dttffu (Open reproduction)

[ahnpnl]

I have the same request. Currently my component uses hook for graphql integration but the hook cannot be used inside routeLoader or other route apis.

I can see one problem of allowing hooks outside component is reactivity state. If the hook contains signals, not sure how it will be.

[MohammadMiras]

I also need this features. I'm trying to access URL inside my custom hook.

[gioboa]

@Nefcanto how did you solve this specific task?

[Nefcanto]

@gioboa, sorry to answer this late. Right now we have to do props drilling. We load some data from the API in routeLoader$, then inside the main component$ we use your custom hooks to get more data, and then we drill those props into our component hierarchy. Yet this is not efficient.

[wmertens]

Actually there's no reason to confine signals to the render tree, but there can be no reactivity between server and client (that requires a communication channel).

Hooks could be made possible inside loaders, but they would not see any context and they would run fresh every time.

So if you want to use a graphql hook inside route loaders, that would technically be possible, but it would be adding some overhead for no reason, and you'd have to put the client provider just before the query.

So it would look weird, and it would be a little inefficient.

[gioboa]

We moved this issue to qwik-evolution repo to create a RFC discussion for this.
Here is our Qwik RFC process thanks.