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 feature 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={(eventStub) => {
      if (whatever) eventStub.preventDefault()
      queryClient.prefetchQuery({
        // know the ID already, don't need params
        queryKey: ["notes", id],
        queryFn: getNotes,
      });
    }}
  />
));

[jgoz]

Within data routers (library mode), it would be super cool if the default prefetch behavior was to invoke the loader for the target href. onPrefetch, if defined, would take precedence.

This would encapsulate data loading particulars within the route and encourage the pattern of fetching/prefetching in the loader to prime the cache, closer to where the query results are used.

But this could totally be a userland thing too:

function useLinkPrefetcher({ to, prefetch }: Pick<LinkProps, 'to' | 'prefetch'>, key?: string) {
  const href = useHref(to);
  const { load } = useFetcher({ key: key ?? `preload/${to}` });

  return useMemo(() => {
    return prefetch ? () => load(href) : undefined;
  }, [href, load, prefetch]);
}

[dantrain]

Great that this is being proposed!

they should have everything they need in scope already

I don't think this is necessarily a safe assumption. There could be things in scope in the route module available to be used in the client loader that are not in scope everywhere a <Link> is used.

It would be great to have the option to call the client loader if desired, for instance if queryClient.prefetchQuery() is sufficient for both navigation and prefetching cases.