React-Table & React-Query getting TypeError: Cannot read property 'forEach' of undefined

Question

I am using react-query to fetch data into react-table, but everytime I get the "TypeError: Cannot read property 'forEach' of undefined" error. The only way I can fix it is using "data" into the react-query "initialData" option, is there another way to fix this error?

const TableCompras = () => {
    const data = [
        {
          nf: null,
          fornecedor: null,

          pagamento: null,
          valorTotal: null
        }
      ]; 

      // Fetch Compras

      const { data: compras, error, isLoading } = useQuery(
        "compras", getAllCompras
        , {
          initialData: data
        }  
      );

      // React Table

     

      const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        page,
        nextPage,
        previousPage,
        canNextPage,
        canPreviousPage,
        pageOptions,
        prepareRow,
        state,
        setGlobalFilter
      } = useTable(
        {
          columns,
          data: compras,
          initialState: { pageSize: 5 }
        },
        useGlobalFilter,
        useSortBy,
        usePagination
      );
}

TkDodo · Accepted Answer · 2021-12-15 06:36:13Z

3

Since react-query gets data asynchronously from somewhere, data is undefined on the first run until your network request actually returns the data. Apparently, you cannot pass undefined to react-table, so you can:

fallback to an empty array when passing to react-table: data: compras ?? []
destruct a default value: const { data: compras = [] } = useQuery(…)
Pass placeholderData to useQuery
Pass initialData to useQuery
Check for isLoading returned from useQuery, move the table to a separate component and don’t render that component as long as you are loading (e.g. render a loading spinner instead)

answered Dec 15, 2021 at 6:36

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lapurita Over a year ago

unfortunately all of these result in a hydration error from next.js...

Collectives™ on Stack Overflow

React-Table & React-Query getting TypeError: Cannot read property 'forEach' of undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related