When you already use prefetch to fetch data from the next page, why do you start a normal fetch when you go to the next page?

[vaynevayne]

The data on the second page is already captured in advance, so why go for it again?

  const fetchDataOptions = {
    data_table_options: {
      page: activePage,
      per_page: per_page,
      order_by: sort,
      columns: columnDefs.filter((item) => !item.hide || item.pivot),
    },
    query_conditions: transformValues(props.form),
    show_total_row: true,
  }
  const {
    isFetching,
    data: res,
    isLoading,
    refetch,
    isPreviousData,
  } = useQuery({
    queryKey: ['/report_data/table', fetchDataOptions],
    queryFn: () => axios.post('/report_data/table', { ...fetchDataOptions }),
    keepPreviousData: true,
    enabled: gridReady,
    onSuccess: (_data) => {
      // gridRef.current?.columnApi.autoSizeAllColumns(false)
      // gridRef.current?.columnApi.autoSizeAllColumns()
    },
  })

  // Prefetch the next page!
  React.useEffect(() => {
    if (!isPreviousData && data?.hasMore) {
      queryClient.prefetchQuery({
        queryKey: ['projects', page + 1],
        queryFn: () => fetchProjects(page + 1),
      })
    }
  }, [data, isPreviousData, page, queryClient])

[TkDodo]

background update because the component mounts and we have a default staleTime of zero