Selective Data Fetching and Loading States

[RabeeAbuBaker]

Consider the following scenario:

You have a route (routeName.$someId) with two components:

• A chart that depends on filter values stored in the query parameters.
• A list that does not depend on the filters.

Each time the filters change, an API call should be made to fetch new chart data, but the list data should remain unaffected by these changes. The list’s data comes from a separate API call and should only be fetched when the route is first loaded.

Current Setup:

• Each component relies on a separate API, both API calls are made in the loader.
• The filter state is managed through query parameters in the URL.
• Both calls are deferred
• On param change, the loader revalidates both APIs

Goals:

• Selective Data Fetching: Ensure that only the chart’s data is re-fetched when the filter values change, while the list’s data remains unchanged and unaffected.
• Loading Indicators: Implement a way to track and display which part of the data is being loaded. For example, show a loading spinner specifically for the chart when it’s fetching new data, but avoid displaying any loading state for the list.

Question:

• What is the best approach in Remix to handle this scenario where components that rely on query parameters (like the chart) coexist with components that don’t (like the list) on the same route?
• How can I ensure that only the chart’s data is refetched when the filters change, without affecting the list?
• How can I maintain a clean and specific loading state for the chart without interfering with the list’s loading state?

Solutions I've considered

• Using fetchers to load the chart data, but managing the params state in route will always revalidate the loader data when their value is updated. I will also have to manage triggering the fetcher in a useEffect
• Caching the list data via a clientLoader, but I'm unsure how to partially cache some of the data instead of the entire loader data. Furthermore, there are scenarios where the list data could depend on other query params that shouldn't trigger the chart's API refetch. I’m looking for a more straightforward solution that clearly separates the logic for chart and list data loading, ensuring clean, selective refetching and loading states.

[sergiodxa]

A route is a single unit so it's not possible to only revalidate part of a route loader, but you can split a route on two routes with different loaders essentially creating two units that can run independently of each other.

In your case you could have route for the chart and another for the list, then you can use shouldRevalidate on the list route to avoid it, nest one inside the other and you will have a single UI built using two routes.

[RabeeAbuBaker]

Can I split the components into two pathless routes, like wallet._static-path1.$currency and wallet._static-path2.$currency (or just wallet.$currency and wallet._static-path.$currency), and render both under /wallet/:currency?

I tried doing this, but only one route (the first pathless route) was rendered inside the .

[sergiodxa]

You can but they need to be nested, so wallet._static-path1._static-path2.$currency.

[RabeeAbuBaker]

Can you please take a look at this stackblitz? ... Only the second pathless route is getting rendered. What am I exactly doing wrong here? Thanks again! 🙏

[sergiodxa]

Remove the first one to remove the $currency at the end

[RabeeAbuBaker]

Thanks! 🙏