Use Loader to Feed a Route with Data in Tanstack Router

In this lesson, we learn how to use the loader option in TanStack Router to fetch data for a route.

We start by moving hardcoded data from a component to a loader function, which typically makes an HTTP request to fetch data.

The loader function returns a promise, and we consume this data in the component using the useLoaderData hook.

This approach allows TanStack Router to handle asynchronous data fetching seamlessly, ensuring that components render without needing explicit waiting mechanisms.

We also integrate it with a real API by using a getEmployees function in the `loader.

Additionally, we see how TanStack Router caches the fetched data for efficient navigation.

Transcript

[00:00] We've got the employees root component opened and it's being displayed on the right hand side here in the employees root. Now I have hardcoded a list of employees objects which are being displayed here in a simple ULLI list. What 10-Stack Router allows us to do is to provide a loader option for a given route, which is essentially going to most probably run an HTTP request that is going to fetch the data for us. So in the first step, I'm just going to move away the hardcoded data from the component itself to the loader. And just to pretend that this is an async function that returns a promise.

[00:42] So here, essentially, this returns a promise of the array of these objects. We're just going to consume this within our root component. So I'm going to use the root. So this is essentially the same variable, and I'm going to use the useLoader data. So let me just save the file and let's rerun this application.

[01:05] So home, about, and in employees, we've got this over here. So what is cool is that even though this is an async function, then there is no need for us to perform any kind of a wait over here. So TANsecruiter is handling this for us. Now we don't want this data to be hard-coded obviously so this was just the first step. So let's proceed to step number two.

[01:30] I am running a local mock API that for localhost slash employees is returning essentially a list of JSON objects that we're going to use over here. And I have also created an src API slash employee API TS file. So here is just a simplified type employee with some properties over here. And I've got this export const get employees function. So this is going to be a real fetch API call that potentially we would also provide some URL search parameters.

[02:07] Anyway, we're going to use the get employees function. So I'm going to just comment this out. And the loader is just going to use this get employees function. I'm going to import it over here. So what we can see is that in the first hard code, the first name and last name was a different separate property.

[02:33] And here in our new API, there is essentially a single name property that includes both. So let me just fix this one. So this is employee name. So let's also get back to what we have over here. So this is home, this is about, and here we can also see in the network tab that we are actually running the request to the employees on the server.

[02:58] Let's also close the DevTools and let's open TownStack router DevTools and we will see that the employees route has been cached.