[🐞] Use <Resource... /> with routeLoader$

[gabriiels]

Which component is affected?

Qwik City (routing)

Describe the bug

Using a graphql library (@urql/core) with routeLoader

The problem is the following:

When you query a graphql api and want to read the results in a <Resource ...>, you only get onResolved . But onPending and onRejected don't work

[manucorporat]

it's hard we will find time to look into this issue without a repo case, ie, something we can play with, fix and finally integrate as a regression test.

Also, missing some of the parts of the template, such as which version is it etc.

[keuller]

As far as I understand, routerLoader$ by design does not returns a Promise but it returns a Signal. If you want to use <Resource .../> to load data my suggestion it to use a combination useResource$ + server$. The snippet below does it.

export const getData = server$(() => {
    return new Promise((resolve) => {
        setTimeout(() => resolve(1), 1000) 
    });
});

export default component$(() => {
    const data = useResource$(() => getData());
    return (
        <>
            <Resource value={data} 
                onPending={() => <>Loading..</>}
                onResolved={(val) => <>{val}</>}
            />
        </>
    )
});

The side effect of this approach is a weird (looks like a bug to me), when you navigates to the page via SPA the streaming behavior works perfectly, but once you're in the page and reload the page rendering is synchronous which means your user will wait until the Promise resolves to continue the rendering process.

Related issue 4178

[shairez]

Thank you for submitting this issue @gabriiels !

Without a link to a reproduction repo or a playground environment that showcases the issue, we cannot simulate it and work on it's fix.

So we're closing this issue for now, to keep things organized, but feel free to re-open this issue when you'll have the time to create a project / stackblitz / playground that showcases the issue.

Thanks!