Add onPrefetch to Link

[ryanflorence]

We can prefetch loader data because we simply use html <link rel="prefetch" /> and then the browser manages the cache with HTTP. We get requests to prefetch client loaders too but then we'd need a cache to store them (and expire them) etc.

Instead, I think we can add a very simple event to links: onPrefetch.

Apps can simply do whatever they'd like there, probably call prefetch on whatever cache they're using (like React Query).

// client loader uses fetchQuery already
export async function clientLoader({ params }) {
  return queryClient.fetchQuery({
    queryKey: ["notes", params.id],
    queryFn: getNotes,
  });
}

// links can prefetch anything they need to
<Link
  to="/notes"
  prefetch="intent"
  onPrefetch={() => {
    queryClient.prefetchQuery({
      queryKey: ["notes", "abc"],
      queryFn: getNotes,
    });
  }}
/>;

This way we can still prefetch the JS modules and they can prefetch everything else.

Signature

I don't think it needs any arguments because they should have everything they need in scope already:

notes.map(note => (
  <Link
    to={note.id}
    prefetch="intent"
    onPrefetch={() => {
      queryClient.prefetchQuery({
        // know the ID already, don't need params
        queryKey: ["notes", id],
        queryFn: getNotes,
      });
    }}
  />
));