SolidJS•6mo ago

how do i dedupe requests without `cache`?

i tried everything. it always calls the function either twice or even thrice on client, after the server fetching the data too.

21 Replies

HusseinOP•6mo ago

i want: 1. the data is fetched on the server only, unless its a client navigation 2. its fetched freshly every time, so no cache 3. its fetched on <a> hover i'm using a route load export const route = { load: () => _get() } satisfies RouteDefinition; but its fetching on both server and client for some reason i used a route load to address the 3rd point and then i do this:

export default function About(props: { data: Promise<string> }) {
  const ver = createAsync(() => props.data);

  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <Suspense fallback={<p>Loading...</p>}>
        <p>{ver()}</p>
      </Suspense>
    </main>
  );
}

export default function About(props: { data: Promise<string> }) {
  const ver = createAsync(() => props.data);

  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <Suspense fallback={<p>Loading...</p>}>
        <p>{ver()}</p>
      </Suspense>
    </main>
  );
}

peerreynders•6mo ago

Perhaps put it in a context value: - expose a function that forces the fetch to update the context value. Use that function in the route load(). - the actual context accessor simply returns the last known value unless the collocated timestamp taken when the last fetch returned indicates that the result is stale-in that case initiate a new fetch that will reactively update the context value (and timestamp). It may be easier with createResource first.

HusseinOP•6mo ago

can u read what i said why does createAsync without export const route not support hovering?

peerreynders•6mo ago

Reading, is not understanding; being written doesn't mean it is understandable. The only thing that is a given is that load() is called when you hover unless you have turned off preloads.

HusseinOP•6mo ago

how is preloading disabled?

peerreynders•6mo ago

Ryan keeps mentioning the option. What I've been able to discover so far: - <A> has a preload prop. - load() has an intent property in its option argument which could be preload if you want to bypass stuff. - I think there was a global way but I can't find that right now.

GitHub

solid-router/src/components.tsx at a7e406268d93fc00cfb33ae730868fd5...

A universal router for Solid inspired by Ember and React Router - solidjs/solid-router

peerreynders•6mo ago

The <Router /> component has a preload prop - so that's the global option.

HusseinOP•6mo ago

example?

Madaxen86•6mo ago

Why not use the cache function and do a revalidate of the function in onMount of the page?

HusseinOP•6mo ago

good idea this is basically what i want, but simpler but wait, that's not a good idea it'll overrwrite if coming from a server request xd and destroy preloading... because it revalidates

peerreynders•6mo ago

I still don't understand what your beef with cache is. I cannot find evidence of the claims you make in your OP. Starting with a basic SolidStart install: - Add src/api.tsx - Move src/routes/about.tsx to src/routes/abouts/[id].tsx and apply the modifications indicated. - Alter the link in src/app.tsx to <a href="/about/10">About</a> Then: 1. During SSR the fetch is run once on the server. It doesn't rerun on the client. 2. Once it is older than 5 seconds and a new consumer connects to the cache point the data is refreshed-updating all connected consumers. 3. On hover the preload starts the fetch and it runs exactly once:

preload: person 10
done fetching 10
navigate: person 10

preload: person 10
done fetching 10
navigate: person 10

So there are no duplicate fetches …

api.ts

id.tsx

HusseinOP•6mo ago

i have no beef with cache. i learned i can use createAsync or createResource on their own to fetch something. but then i learned i need to use export const route = {load} to enable preloading on hover. this is when it started requesting more than >1 times. so i'm forced to use cache even though i don't need all its behavior.

peerreynders•6mo ago

createAsync(), cache() and load() were purposefully designed to work in concert to enable fast navigation, avoid waterfalls and duplicate fetches. Deduping is the primary purpose of the cache wrapper which is why this topic's title is confusing. Why would you want to “dedupe requests without cache” when that is cache's reason for existence?

even though i don't need all its behavior.

What exactly is the behaviour you don't need (or don't want)? The only thing I can come up with is that it fetches when another createAsync attaches once the 5 second window of the last fetch has passed. So don't ever let more than one createAsync attach to the cache point. Rather than having each component attach to the cache point separately with their own createAsync have them build on top of the singular createAsync point that you expose instead of the cache point. You still get load() on preload and fetch on navigate if you warm the cache point in the load().

HusseinOP•6mo ago

try to generate random uuid and navigate quick in the browser history forward backward you'll see it doesn't change until some time i don't want that simple

peerreynders•6mo ago

That's because for bfcache cache lasts 5 minutes. So in fact you want to dedup less, fetch more. Backward/Forward are browser controls - not application controls. They are designed to provide stale views from the bfcache without additional fetches. So caches behaviour is in line with browser design. Perhaps Backward/Forward aren't intended for the purpose you are trying to use them for.

web.dev

Back/forward cache | Articles | web.dev

Learn to optimize your pages for instant loads when using the browser's back and forward buttons.

HusseinOP•6mo ago

i just used backward/forward as an example navigation from links is the same i just want to fetch data without cache... and i wanna see only 1 request in network xhr tab

peerreynders•6mo ago

How do you propose to dedupe without a staleness window?

HusseinOP•6mo ago

have u used sveltekit load function or remix load that's what i need its not as complex as u think it is :D when i tried doing that, its either making duplicate requests or not working on hover...

peerreynders•6mo ago

its not as complex as u think it is

And yet this topic exists … How does this work for you? Fixed preload:

peerreynders•6mo ago

id.tsx

peerreynders•6mo ago

Another idea:

id.tsx

Gaming

Programming

how do i dedupe requests without `cache`?