godsplane
@godsplane

Как правильно фильтровать данные в таблице tanstack table?

spoiler
const orders = useGetManagerOrders(
    {
      page: pagination.pageIndex + 1,
      per_page: perPage,
      status_id: statusId
    },
    {
      query: {
        queryKey: ['orders', pagination, statusId],
        placeholderData: keepPreviousData,

        initialData: initialData,
        refetchOnMount: false
      },
      request: {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          Authorization: `Bearer ${session?.token}`
        }
      }
    }
  );

  const defaultData = React.useMemo(() => [], []);

  const table = useReactTable({
    columns,
    data: orders.data?.data.data ?? defaultData,
    rowCount: orders.data?.data?.meta?.total ?? 0,
    state: {
      pagination
    },
    onPaginationChange: setPagination,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true
  });


есть такой код, initialData я получаю снаружи компонента в котором этот код вызывается на уровне сервера.

Проблема в том что при изменении statusId у меня идет рефетч данных и во время их загрузки как будто бы показываются данные из initialData , то есть не верные, после успешной загрузуки все встает нормально, но вот этот "блинк" из ложных данных меня беспокоит. Если я убираю initialData и placeholderData то все ок, но тогда вся таблица отчищается, так как данных нет.
Как можно решить эту проблему?Возможно я изначально использовал не тот подход, но вроде бы placeholderData: keepPreviousdata нужен как раз для решение такой проблемы.
  • Вопрос задан
  • 24 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы