Lesson
Use Loader to Feed a Route with Data in Tanstack Router
Use TanStack Router's loader to fetch data for routes, leveraging async functions and caching.
- Access
- Included
- Transcript
- Needs source
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.