useQuery with Enhanced Error Handling

useEnhancedQuery.js

import {useCallback, useEffect, useMemo, useState} from "react";
import {useQuery} from "react-query";

// Provide ability to reset the error
const useEnhancedQuery = (queryKey, queryFn, options) => {
  const {error: queryError, refetch: queryRefetch, status, ...queryResult} =
    useQuery(queryKey, queryFn, options);

  const [error, setError] = useState(queryError);

  useEffect(() => {
    if (queryError) {
      setError(queryError);
    } else if (status === "success") {
      setError(null);
    }
  }, [queryError, status]);

  const refetchWithReset = useCallback(() => {
    // Reset error before refetch. 
    setError(null);
    return queryRefetch();
  }, [queryRefetch]);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  return useMemo(() => ({
    ...queryResult,
    error,
    isError: !!error,
    status,
    refetch: refetchWithReset,
    resetError
  }), [queryResult, error, status, refetchWithReset, resetError]);
};

export default useEnhancedQuery;

Usage example:

import {Space, Table} from "antd";

export default function MyComponent() {
  const {isLoading, isFetching, isPreviousData, error, data, refetch, resetError} =
    useEnhancedQuery(["history", startKey], () => getHistory(startKey));

  return (
    <Space direction="vertical">
      {error &&
        <Space direction="horizontal">
          <Alert message={error.message}/>
          <Button onClick={resetError}>Cancel</Button>
          <Button onClick={refetch}>Retry</Button>
        </Space>}
      {!error &&
        <Table
          columns={getColumns()}
          dataSource={data}
          loading={isLoading || (isFetching && isPreviousData)}
          rowKey={({createdTime}) => createdTime}/>}
    </Space>
  );
}