refetch only part of loader with useFetcher

[ddavid67]

In the doc there is an example with useFetcher usage with a combobox.
My question is, what if there is multiple combobox on the page ?

useFetcher will reload all combobox data, even if I am searching in only one combobox ?

This is not great at server side as it will do unnecessary database requests.

Is there a way to optimize this ?
Is there a way to refetch only part of the loader ?
Couldn't multiple components on the same route have their own loader ?

[kiliman]

Just add a querystring to your fetcher.load request. Then in your loader, you can return the specific data you want.

fetcher.load('/route?filter=option1')

const url = new URL(request.url)
const filter = url.searchParams.get('filter')
let data
switch (filter) {
  case 'option1':
    data = await getOption1()
    break
  case 'option2':
    data = await getOption2()
    break
  default:
    data = await getAll()
}
return json(data)

Although this is possible, it might be better to create a separate resource route for this. You can import the same data functions in both the route and the resource.

[ddavid67]

If I return option2 only, what happens with data rendered with option1 ?
how to keep the state of combobox 1 when refetching combobox 2 ?

[kiliman]

It depends... the way you describe your setup is that you're returning data in loaders. Typically you'd get your data via useLoaderData. With useFetcher the data is in fetcher.data.

You would likely have to have a separate useState that initializes with loader data, and then updates with fetcher data. Then your combo box binds to state.

I think this may over complicate things. You'll have to decide if the tradeoffs are worth it.