Refactored useQuery functions.

src/components/hooks/useFilterQuery.ts

@@ -1,24 +1,25 @@
-import { useState } from 'react';
+import { useState, Dispatch, SetStateAction } from 'react';
 import { useApi } from 'components/hooks/useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
+import { SearchFilter, FilterResult } from 'lib/types';
 
-export function useFilterQuery(key: any[], fn, options?: UseQueryOptions) {
-  const [params, setParams] = useState({
+export interface FilterQueryResult<T> {
+  result: FilterResult<any[]>;
+  query: any;
+  params: SearchFilter;
+  setParams: Dispatch<SetStateAction<T | SearchFilter>>;
+}
+
+export function useFilterQuery<T>(props = {}): FilterQueryResult<T> {
+  const [params, setParams] = useState<T | SearchFilter>({
     query: '',
     page: 1,
   });
   const { useQuery } = useApi();
-
-  const { data, ...other } = useQuery([...key, params], fn.bind(null, params), options);
+  const { data, ...query } = useQuery<FilterResult<any[]>>({ ...props });
 
   return {
-    result: data as {
-      page: number;
-      pageSize: number;
-      count: number;
-      data: any[];
-    },
-    ...other,
+    result: data,
+    query,
     params,
     setParams,
   };

src/components/hooks/useReports.ts

@@ -8,10 +8,10 @@ export function useReports() {
   const { mutate } = useMutation(reportId => del(`/reports/${reportId}`));
   const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
     useApiFilter();
-  const { data, error, isLoading } = useQuery(
-    ['reports', { modified, filter, page, pageSize }],
-    () => get(`/reports`, { filter, page, pageSize }),
-  );
+  const { data, error, isLoading } = useQuery({
+    queryKey: ['reports', { modified, filter, page, pageSize }],
+    queryFn: () => get(`/reports`, { filter, page, pageSize }),
+  });
 
   const deleteReport = id => {
     mutate(id, {

src/components/hooks/useShareToken.ts

@@ -6,12 +6,15 @@ const selector = (state: { shareToken: string }) => state.shareToken;
 export function useShareToken(shareId: string) {
   const shareToken = useStore(selector);
   const { get, useQuery } = useApi();
-  const { isLoading, error } = useQuery(['share', shareId], async () => {
-    const data = await get(`/share/${shareId}`);
+  const { isLoading, error } = useQuery({
+    queryKey: ['share', shareId],
+    queryFn: async () => {
+      const data = await get(`/share/${shareId}`);
 
-    setShareToken(data);
+      setShareToken(data);
 
-    return data;
+      return data;
+    },
   });
 
   return { shareToken, isLoading, error };

src/components/hooks/useWebsite.ts

@@ -2,7 +2,9 @@ import useApi from './useApi';
 
 export function useWebsite(websiteId: string) {
   const { get, useQuery } = useApi();
-  return useQuery(['websites', websiteId], () => get(`/websites/${websiteId}`), {
+  return useQuery({
+    queryKey: ['websites', websiteId],
+    queryFn: () => get(`/websites/${websiteId}`),
     enabled: !!websiteId,
   });
 }