How can a child route loader access previously fetched data?

[grand comet]

The demo at https://reactrouter.com uses contacts stored in local storage, and when a contact is selected from the sidebar, it appears the loader reads all of the contacts again:

export async function getContact(id) {
  await fakeNetwork(`contact:${id}`);
  let contacts = await localforage.getItem("contacts");
  let contact = contacts.find(contact => contact.id === id);
  return contact ?? null;
}

Is this what is happening?

How do I have a child component (using the same approach as in the demo) access previously loaded data from the parent component without fetching a new?

[twin blade]

useLoaderData works via context so you can use that in your child components

[grand comet]

The demo uses that but then the loader function calls getContact which refetches all contacts from the local storage.

Isn’t there a way to access the previously loaded data?

[twin blade]

that's what useLoaderData does

it doesn't trigger the loader

the loader revalidates after actions

and while navigating

[grand comet]

Ok. I’ll take another look later and provide more specific code. I’m still not understanding, but I appreciate your time. I’ll be back

[oak garden]

Jacob have a article here about it:
https://www.jacobparis.com/content/remix-route-loader-data

[grand comet]

I’ll read the article, and the try useRouteLoaderData again. When I first tried it, it came back undefined.

[grand comet]

Following the approach in the guide, for the tutorial (and my own app), I get undefined.

[grand comet]

Ah ha! I figured it out. It turns out one needs to explicitly label the id: "root", when creating the router!