Error Reading Data from Supabase with the help of React-Query [TypeError: Cannot read properties of undefined (reading 'forEach')]

[reubence]

I'm trying to read data from supabase into react-table, with the help of react-query. Have been trying to figure this out for a week not but not able to.

useReadData.ts Hook

export default function useReadData(table_name, startRow, endRow, fetchIdRef) {
  const fetchId = ++fetchIdRef.current;
  return useQuery(["read_data"], () => {
    // I don't know the source of fetchId, maybe you can pass it in the hook too?
    if (startRow && endRow && fetchId === fetchIdRef.current)
      return supabase
        .from(table_name)
        .select("*")
        .range(startRow, endRow)
        .then(handleSupabaseError)
        .then(({ data }) => data);

    // To avoid returning Promise<void>. You can handle this in the useEffect as well
    return Promise.resolve([]);
  });
}

In the App.tsx file:

  const [rowData, setRowData] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [pageCount, setPageCount] = React.useState(0);
  const [range, setRange] = React.useState<Range>();

  const fetchIdRef = React.useRef(0);

  const fetchData = React.useCallback(({ pageSize, pageIndex }) => {
    const startRow = pageSize * pageIndex;
    const endRow = startRow + pageSize;
    // setPageDetails({ startRow, endRow });
  }, []);

  const { data } = useReadData(
    "company",
    range?.startRow,
    range?.endRow,
    fetchIdRef
  );

  useEffect(() => {
    setRowData(data);
    setPageCount(10);
    setLoading(false);
  }, [data]);

The error that I'm getting points to this line:

Please let me know if I need to provide any more information on this issue. Thanks for any help in advance.

[stuartcrobinson]

any luck here? i'm about to start connecting supabase w/ tanstack react-table, looking for successful examples rn