Use react query in table with sorting and filtering

[ronaldruzicka]

Hi, I'm trying to use react-query with my existing Table component.
The thing is, that I have a query to fetch some data. I'm passing an object with base config for sorting and pagination.

const { data, refetch } = useQuery(['key', { limit: 10, offset: 0, order: 'ASC', orderBy: 'name' }], service);

Then in the table component is a sort button in each column. I added refetch function to the sorting button, but I need to pass another object where order: 'DESC', which I cannot, since the refetch doesn't have any configuration object.

How would you approach something like this with react-query?

This is a function which I use for sorting, where fetchAction was actually the refetch from the useQuery hook.

const handleSortRows = (_: React.MouseEvent<unknown>, property: string) => {
  const isAsc = order === SortOrder.Ascending

  fetchAction({
    order: isAsc ? SortOrder.Descending : SortOrder.Ascending,
    orderBy: property,
  })
}

Same or similar problem would be with filters, where each filter has different payload, but I need the data to be connected. So when I fetch for all data with a useQuery hook, how can I fetch filtered data and still use the { data } = useQuery(...) from the hook?

Is there a way to approach this with react-query?
Thanks for any input! 🙏🏻

[TkDodo]

You could just solve it with state:

const [order, setOrder] = React.useState('ASC')
const { data, refetch } = useQuery(['key', { limit: 10, offset: 0, order, orderBy: 'name' }], service);

and then just call setOrder when the user clicks the sorting button.

please be aware that each query key has it's own "data", so if you put filtering / sorting options in the key, you will not get all the benefits of react-query.

This has been outlined in the paginated queries section of the docs:

If we were to use useQuery, it would technically work fine, but the UI would jump in and out of the success and loading states as different queries are created and destroyed for each page or cursor.

so for the pagination, usePaginatedQuery is likely better.

[TkDodo]

Oh, actually, the implementation of usePaginatedQuery is super simple:

const result = useBaseQuery(queryKey, {
  keepPreviousData: true,
  ...config,
})
return {
  ...result,
  resolvedData: result.data,
  latestData: result.isPreviousData ? undefined : result.data,
}

it just utilizes keepPreviousData, which, according to the docs, does:

If set, any previous data will be kept when fetching new data because the query key changed.

so I think you can just implement paging and sorting alike with that and have your state change the queryKey :)

[TkDodo]

So when I fetch for all data with a useQuery hook, how can I fetch filtered data and still use the { data } = useQuery(...) from the hook?

I think transformations are now currently best done with useMemo:

const { data} = useQuery(...)

const filteredDate = React.useMemo(() => myTransformation(data), [data])

you can also abstract that away in a custom hook. It looks like the next major version might have a select function built in for the query options that could solve this better.

[vishnutm]

Is there a more effective approach available for this?

[TkDodo]

the above useMemo example can be done with select now:

const { data } = useQuery({
  queryKey,
  queryFn,
  select: myTransformation
})

[BGrzegorczuk]

As far as I understand, select function operates on cached data - there are no requests to the server when changing filters. Looks like this requires fetching all the data on the first request and then only filter on the UI, depending on given params (page, offset, limit, phrase). However, I do not want to fetch huge amount data initially - it's rather not performant.

What is the preferred way to actually hit the server for the data with given filters (phrase, page, limit, sort, etc). I tried to include all those params in form of js object in query keys array, but this causes my filtering input (controlled component) to loose focus on every keystroke. This is obviously unacceptable behavior :)

My simplified code looks more or less like below:
|

export const TodoList = () => {
    const [searchPhrase, setSearchPhrase] = useState('');
    useQuery({
      queryKey: ['todos', 'list', {query: searchPhrase}],
      queryFn: () => fetchTodos
    });
}

function fetchTodoList({ queryKey }) {
    const queryPhrase = queryKey[2].query;
    const res = await apiClient.get('todos', filters);
    return res.data;
}```

[TkDodo]

I tried to include all those params in form of js object in query keys array

this is the way, but you'd want to split your code up. Not sure when exactly you want to trigger the search, but I'd imagine something like this:

const [searchPhrase, setSearchPhrase] = useState('');
const debouncedSearchPhrase = useDebounce(searchPhrase, 250)
useQuery({
  queryKey: ['todos', 'list', {query: debouncedSearchPhrase}],
  queryFn: () => fetchTodos(debouncedSearchPhrase)
});

or maybe you only want to fetch when the user clicks enter / applies the search or something?

const [appliedSearchPhrase, setAppliedSearchPhrase] = useState('');
useQuery({
  queryKey: ['todos', 'list', {query: appliedSearchPhrase}],
  queryFn: () => fetchTodos(appliedSearchPhrase)
});

<MySearchForm onSearch={phrase => setAppliedSearchPhrase(phrase) } />

MySearchForm can then internally handle the ephemeral state and after some time / when enter is clicked, you store it as "applied state" and use that to fetch. A good way to store applied state is the url btw.

[BGrzegorczuk]

Thank's for your suggestions and fast-lightning reply :)

I must have had one of these days when you look at the code, but just don't see ;)

It's quite obvious that I kept loosing focus on an input when it was removed from html on each query :)

const { isPending, isError, isSuccess, data, error } = useQuery(
  queryKey: ['todos', 'list', {query: debouncedSearchPhrase}],
  queryFn: () => fetchTodos(debouncedSearchPhrase)
);

if (isPending) {
  return <Loader/>;
}
else if (isError) {
  return <div>{error.message}</div>;
}

else if (isSuccess) {
  return <>
   <SearchForm/>
   <TodoList/>
   </>
}

The solution was, of course, to move SearchForm outside of the conditional statements, to prevent removing it when all query params are changing on each data fetch ;)