Router preload and cache.set don't seem to be working
I've got an app that uses a HashRouter, and a couple of routes. The first route is a search page for events, which loads up suggested events for the user and has a form for custom searches, and then displays a list of events, and each list item is wrapped in an A component, pointed at the second route. The second route has a param for event id, and contains methods for interacting with events, as well as an A component linking back to the search page.
Following the docs, I've written a file that exports API call functions to get the list of suggested events and the data for each event, which are wrapped in the cache method. In the top level component, where the router lives, I'm importing both API methods and wrapping them in functions that pass the relevant param to each method, which then becomes the load prop for the route. Within each route, I'm importing the relevant API method and wrapping createAsync around it to create a reactive signal for the API data. I can tell it's working, because I'm seeing the right data and page loads are instant after the initial load.
However, preloads don't appear to be being triggered. The functions don't actually run when I hover over links. Also, the intent parameter is set to "native", not "navigate" when I click on an A component, which isn't what the docs say.
Additionally, when I load the data for the suggested events, I'm trying to manually cache the data for the corresponding events, using the cache.set method, by calling
cache.set(getEvent.keyFor(event.id), event) on each event returned by the API call within the getSuggestedEvents method. This doesn't seem to be working. If I call cache.set within a component, and then call getEvent afterwards, it does return the manually set data, but when I navigate to the page for that event, it's calling the API and overriding the manually set data, as if it's not aware that the cache has been set for that key.
How do I make the cache and preload behaviour work properly?2 Replies
Ok, I think the issue with the preload is that all the preload stuff is not set up to deal with a HashRouter. Squinting at the source code, it seems like the event handling and preload handling stuff relies on interpreting url.pathname from the corresponding anchor element. For my HashRouter, though, the pathname is just "/", which isn't recognised by the event handlers as a path that needs checking for preloads and doesn't match any branches within the preloadRoute function.
Found the bug in my cache usage: when I was manually setting the cache, I was using the id property of my events, which is a number, but when the load functions runs as a result of browser navigation, the params passed in are obviously strings, so I wasn't actually accessing the same key. With a simple .toString() when manually setting the cache, I get the behaviour I want.
it seems like you got your cache.set() working as you expect
could you explain to me what cache.set() is intended to do in general?
I had thought that you could use it in the client to manually update the stored value and reactively update the UI without having to revalidate (similar to mutate in createResource), but it does not seem to do anything when I call it