[QUESTION] How to cache previous page state on back navigation?

[xmsz-stu]

Hi,

I have a list page and a detail page. When navigating from the list to the detail page, then returning back, the list page reloads, losing its previous state (scroll position, filters, etc.). This affects user experience negatively.

Is there a way to cache the list page so it retains its state when returning from the detail page?

[a-type]

Good question, and one I should probably put some more work into in terms of DX.

To start, every query is deduplicated by key. Keys are auto-generated by default, but you could assign your own if you wanted. Generated keys are deterministic to the input parameters.

Queries are kept in memory as long as they are subscribed somewhere, but once they are fully unsubscribed, they will be garbage collected after a set "eviction time," which is 5 minutes. At the moment that's not configurable.

So, 5 minutes after the list query is unsubscribed (for example, the React component using it is unmounted), it will be dropped.

One way you could persist that query today would be to move it somewhere more stable and keep a dummy subscriber on it as long as you want it to be kept alive. But this is kind of awkward and requires making the code more complicated.

I'll be thinking about a more explicit and supported way to do this. Maybe a way to place a 'hold' on a query, by key, on the Verdant store client itself. This could be done in your router, for example, so it places a hold on any vital queries for a route sub-tree, then releases the hold and lets them get collected once the user leaves the subtree. I think that might be a simple and ergonomic way to accomplish the goal, and wouldn't be hard to implement on my end. What do you think?

[xmsz-stu]

That's sound great

[a-type]

I've added this as a new feature in @verdant-web/[email protected]. Be sure to update the CLI and re-run it with your current schema to add the typings for client.queries which let you add keep-alive holds.

Docs (it's in the React section, but this applies for Vanilla as well).