无法使用 Supabase Hook 将数据从数据库读取到 react-table 和 react-query

Question

这是我得到的错误：TypeError: observer.getOptimisticResult is not a function

我正在尝试使用 React-Query 和 Supabase 将数据读入 React-Table。我创建了一个 useReadData.ts 挂钩，如下所示：

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)
  );
}

我在我的 index.tsx 文件中的 App() 组件中调用了这个挂钩：

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);
    }
  }, []);

我已经花了数周时间，但无法解决此错误。请帮忙！

Answer 1

你的方法有两个问题。

您在另一个钩子中有条件地调用一个钩子，这破坏了 rules of hooks
您正在尝试在 setRowData

这是另一种方法：

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([])
    }
  );
}

我对 react-query 不是很熟悉，如果有问题请告诉我。

无法使用 Supabase Hook 将数据从数据库读取到 react-table 和 react-query

Not able to use Supabase Hook to read data from database into react-table with react-query

reactjs

react-table

react-query

supabase-database