Using the select function for pure FE filtering

[johnsonav1992]

Hey there,

I have a scenario where I am fetching all data from the BE using a useQuery hook (for simplicity sake let's just say it's a list of users) and then from there I have a UI for filtering set up to more or less allow the user to manipulate and filter what was fetched as many times as they want but not refetch any more data (since we already have all of it). Is there a way to use the select function on useQuery or maybe something else in the query client to make this functionality happen without triggering any refetches or anything like that? Basically, can we call select or some other function (on command) more than once, even if the original fetched data has not changed. Right now I am storing my data in separate state inside a context using a reducer to achieve this and I'd like to avoid that if possible.

Hope to hear your thoughts soon. Thanks!

[TkDodo]

Yes you can use select, as the select function always runs when the referential identity changes. So if you use an inline function:

const useUsers = (filters) => {
  return useQuery({
    queryKey: ['users'],
    queryFn: fetchAllUsers,
    select: (users => filterUsers(users, filters))
  })
}

it should work.