React: retrieve all pages of paged list

Question

In my React app, I have this segment of code which retrieves some data (a paged list of Employees):

  const [propertyFilter, setPropertyFilter] = useState<PropertyFilter>({
    filter: {},
    pageNumber: 1,
    pageSize: 20,
    sortBy: 'Name',
    sortAscending: true,
  })
  const { data, isFetching, refetch } = useGetEmployeesFilteredQuery(propertyFilter)

  useEffect(() => {
    setPropertyFilter((prevFilter) => ({
      ...prevFilter,
      pageNumber: currentPage,
    }))
  }, [currentPage])

  const onApplyFilterRefetch = () => {
    const timer = setTimeout(() => {
      if (!isFetching) refetch()
    }, 500)
    return () => {
      clearTimeout(timer)
    }

Later on it can set a filter that is to be applied to this data.

However, later in my page, I need to be able to export a selection of employees to excel - so, all of the employees which fit the given filter, not just one page.

 <div className='p-2'>
                <ExportButton
                  exportType={ExportTypeEnum.EmployeesSelectionExport}
                  ids={data?.filteredItems.map((e) => e.id)}
                />
              </div>

(this currently only gives me one page of the filtered results)

Is there a nice way to achieve this?

Answer 1

You will have to cache all the fetched results so that you can manually filter them and send to Excel, or you will need to run a new query fetching all of the items that match the filter your user sets and send this new result set (unpaged) to Excel.

If you are not caching the value of data between screens, then each query is overwriting that data and your browser no longer has it.