#strategy for using search params for loader data and switching to fetcher data(?)

1 messages · Page 1 of 1 (latest)

low oak
#

I'm using react router and trying to figure out how to effectively use the new loader utilities. I have a page that has several dropdowns for criteria to fetch a list of data for a table. These dropdowns have options that are dynamic based on other dropdown values. I'm struggling to figure out what should go in the page's route loader and what should go in dedicated routes loader to be used by fetchers. It seems handy to make the Form a GET and store the dropdown values as search params. By doing that i have access to the values in the page's route loader so i could fetch the dropdown options there. However, after the page is rendered and the user selects something for one dropdown the next dropdown needs to fetch its options based on the previous dropdown's value. That seems like what useFetcher is for. I'd be switching from the loader data to fetcher data on the fly though and that feels weird. I feel like i'm over complicating this but i'm not sure what the "right" approach is here. Should the page route loader just be for table data and i have a waterfall of fetcher.loads when the page initially loads if there are values in the search params to fetch the dropdown options? Are there any rules of the thumb for this type of decision making? Seems like there's a lot of different options for where, when, and how things should be loaded.

image.png
#

also, the data for the table never needs to be loaded when the user navigates to the page regardless of the dropdown selections. The fetching of the data only ever needs to happen on an explicit Search button click. So if the user reloads, the search params should just populate the values for the dropdowns but not actually load the table data.

tidal bramble
#

You can use loader to get initial values based on search params, and then default to fetcher.data if available. Something like const dynamicOptions = fetcher.data ?? loaderData.dynamicDropdown

tidal bramble
low oak
#

@tidal bramble the table data loads very slowly but it'd still be handy to be able to share links with certain things auto-selected. i don't want the user to have to wait on that slow table data load. They might want to use the link as a starting point to select different options and then request the table data. i don't think i would have a way to determine in the loader if the user actually wants to go ahead and fetch the table data with the incoming options or just use it as a starting point to select different things

tidal bramble