gracefully handling pull down to refresh

src/providers/queries/notificationQueries.ts

@@ -1,4 +1,5 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { QueryFunction, useInfiniteQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
 import { getNotifications } from '../ecency/ecency';
 import { NotificationFilters } from '../ecency/ecency.types';
 import QUERIES from './queryKeys';
@@ -6,25 +7,54 @@ import QUERIES from './queryKeys';
 export const useNotificationsQuery = (filter: NotificationFilters) => {
   const _fetchLimit = 20;
 
-  return useInfiniteQuery<any[]>(
+  const [reducedData, setReducedData] = useState<any[]>([]);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const _fetchNotifications = async (pageParam: string) => {
+    console.log('fetching page since:', pageParam);
+    const response = await getNotifications({ filter, since: pageParam, limit: _fetchLimit });
+    console.log('new page fetched', response);
+    return response || [];
+  };
+
+  const _getNextPageParam = (lastPage: any[]) => {
+    const lastId = lastPage && lastPage.length === _fetchLimit ? lastPage.lastItem.id : undefined;
+    console.log('extracting next page parameter', lastId);
+    return lastId;
+  };
+
+  //query initialization
+  const notificationQuery = useInfiniteQuery<any[]>(
     [QUERIES.NOTIFICATIONS.GET, filter],
-    async ({ pageParam }) => {
+    ({ pageParam }) => _fetchNotifications(pageParam),
-      console.log('fetching page since:', pageParam);
-      const response = await getNotifications({ filter, since: pageParam, limit: _fetchLimit });
-      console.log('new page fetched', response);
-      return response || [];
-    },
     {
       initialData: {
         pageParams: [undefined],
         pages: [],
       },
-      getNextPageParam: (lastPage) => {
+      getNextPageParam: _getNextPageParam,
-        const lastId =
-          lastPage && lastPage.length === _fetchLimit ? lastPage.lastItem.id : undefined;
-        console.log('extracting next page parameter', lastId);
-        return lastId;
-      },
     },
   );
+
+  //workaround for handling query refresh
+  useEffect(() => {
+    if (!isRefreshing) {
+      const _data = notificationQuery.data?.pages.flatMap((page) => page);
+      console.log('flat map', _data);
+      setReducedData(_data || []);
+    }
+  }, [notificationQuery.data, isRefreshing]);
+
+  const _refresh = async () => {
+    setIsRefreshing(true);
+    notificationQuery.remove();
+    await notificationQuery.refetch();
+    setIsRefreshing(false);
+  };
+
+  return {
+    ...notificationQuery,
+    reducedData,
+    refresh: _refresh,
+  };
 };

src/screens/notification/container/notificationContainer.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unused-state */
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Alert } from 'react-native';
 import { useDispatch } from 'react-redux';
 import get from 'lodash/get';
@@ -63,8 +63,7 @@ const NotificationContainer = ({ navigation }) => {
       notificationsQuery.fetchNextPage();
     } else {
       console.log('refreshing');
-      notificationsQuery.remove();
+      notificationsQuery.refresh();
-      notificationsQuery.refetch();
     }
   };
 
@@ -161,8 +160,7 @@ const NotificationContainer = ({ navigation }) => {
     setSelectedFilter(value);
   };
 
-  console.log('query data: ', notificationsQuery.data);
+  const _notifications = notificationsQuery.reducedData;
-  const _notifications = notificationsQuery.data?.pages?.flatMap((page) => page);
 
   return (
     <NotificationScreen