0

This is the error I get : TypeError: observer.getOptimisticResult is not a function

I'm trying to work with React-Query and Supabase to read data into a React-Table. I've created a useReadData.ts hook as shown below:

export default function useReadData(table_name, startRow, endRow) {
  return useQuery(
    ["read_data"],
    () =>
      supabase
        .from(table_name)
        .select("*")
        .range(startRow, endRow)
        .then(handleSupabaseError)
        .then(({ data }) => data)
  );
}

I have called this hook in my index.tsx file within the App() component:

function App() {
  const [rowData, setRowData] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [pageCount, setPageCount] = React.useState(0);

  const fetchIdRef = React.useRef(0);

  const fetchData = React.useCallback(({ pageSize, pageIndex }) => {

    if (fetchId === fetchIdRef.current) {
      const startRow = pageSize * pageIndex;
      const endRow = startRow + pageSize;
      const table_name = "company";

      const data = () => useReadData(table_name, startRow, endRow);
      console.log(data);
      setRowData(data);
      setPageCount(10);

      setLoading(false);
    }
  }, []);

I've spent weeks, but I'm not able to resolve this error. Please help!

Reuben Rapose
  • 157
  • 2
  • 8
  • It seems like you're violating the [rules of hooks](https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level) by calling your custom hook inside `useCallback` conditionally. May I ask why you're not using the supabase API directly? – kausko Jan 27 '22 at 13:16
  • Won't I benefit from wrapping the supabase function in useQuery()? Since React-Query handles local caching. – Reuben Rapose Jan 27 '22 at 13:52

1 Answers1

0

There are two problems with your approach.

  1. You're invoking a hook conditionally inside another hook, which breaks the rules of hooks
  2. You're trying to store a function instead of an array inside setRowData

Here's an alternate approach:

index.ts

interface Range{
  startRow: number;
  endRow: number;
}

function App() {
  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])
}

useReadData.ts

export default function useReadData(table_name, startRow, endRow, fetchIdRef) {
  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([])
    }
  );
}

I'm not that familiar with react-query, so let me know if there's a problem in this.

kausko
  • 930
  • 3
  • 10
  • It's throwing another error where I'm creating the react-table instance : `TypeError: Cannot read properties of undefined (reading 'forEach')` – Reuben Rapose Jan 27 '22 at 18:58
  • I'm making a new post with a little more clarity on the new error I'm facing [here](https://stackoverflow.com/questions/70884591/error-reading-data-from-supabase-into-react-table-with-the-help-of-react-query) – Reuben Rapose Jan 27 '22 at 19:29
  • Alright. If my answer resolved your original question regarding fetching data from supabase, it would be great if you could vote it and mark it as solved. – kausko Jan 27 '22 at 19:34
  • Done. Thanks you! – Reuben Rapose Jan 27 '22 at 19:35