eglove
commented
9 months ago I found a very specific fix for this.
First Links need to have replaceState. This is fine, but what people are calling "MPA" and "SPA" modes is what causes the inconsistency here. And we can't expect users to disable javascript in order for these apps to function consistently. Client side navigation will struggle to get default states back. This is the same issue in the input inconsistencies.
Second, and more oddly, a very specific useTask$ is required. Here, it's fine as it is. But on another project I had this:
useTask$(({ track }) => {
currentPage.value = track(() => {
return Number(location.url.searchParams.get(category) ?? '1');
});
});This did not work. But if I change it to this, it seems consistent so far.
useTask$(({ track }) => {
track(() => {
return location.url.toString();
});
currentPage.value = Number(
location.url.searchParams.get(category) ?? '1',
);
});If I just set location.url... to a const, of course that doesn't work. I have to use a task to get this. Even though that doesn't make sense for the initial render. Many of these API's feel bipolar and unstable, I never know which version I'm working with or what magic incantation to speak with the same API's for different scenarios.
wmertens
JerryWu1234
Which component is affected?
Qwik City (routing)
Describe the bug
I have multiple loaders on the same route. Whether I should be using multiple loaders on the same route is beside the point. But it's explained as possible here. However, I get inconsistent behavior with them.
I want to be clear. The fact that this is happening has nothing to do with me personally or any maintainers. We are looking at code and observing a framework in its infancy. The issue here is about USE and RESULTS. Not about the functionality of a repro and whether you want to do something differently.
I have two loaders getting results from two paginations.
Action 1: Click next on ONLY the post of the pagination. This will use
<Link />to route to /loader-action-sync?posts=2. Then click on the top link which uses<Link />to route to /loader-action-sync. The routeLoader will use the default page 1, and posts on the UI will return to page 1 as expected.Action 2: Click next once on BOTH the post and comment pagination. This will put you on /loader-action-sync?posts=2&comments=2. Then click on that top link to go back to /loader-action-sync. The routeLoader will get and return data for page 1 on each. But the UI will not update.
If you just click around on the paginations in general, you'll see a lot of sync issues. Sometimes nothing happens at all, for example. Sometimes the loader runs but the URL doesn't change.
Reproduction
https://github.com/eglove/examples/blob/main/apps/qwik-example/src/routes/loader-action-sync/index.tsx
Steps to reproduce
System Info
Additional Information
No response