fix: #443 Fix pagination issues (#577)

apptension · May 30, 2024 · e1963fd · e1963fd
1 parent 80110fe
commit e1963fd
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 13 deletions.
diff --git a/...s/webapp-api-client/src/hooks/usePaginatedQuery/__tests__/usePaginatedQuery.hook.spec.tsx b/...s/webapp-api-client/src/hooks/usePaginatedQuery/__tests__/usePaginatedQuery.hook.spec.tsx
@@ -1,5 +1,6 @@
 import { MockedResponse } from '@apollo/client/testing';
-import { act } from '@testing-library/react-hooks';
+import { waitFor } from '@testing-library/react';
+import { act } from 'react';
 
 import { fillPaginationItemListQuery, paginationTestItemFactory } from '../../../tests/factories';
 import { renderHook } from '../../../tests/utils/rendering';
@@ -25,10 +26,9 @@ describe('usePaginationQuery: Hook', () => {
       },
       { first: 8 }
     );
+    const useEffectCleanMock = initMockedResponse;
 
-    const mocks = [initMockedResponse, mock].filter(
-      (x): x is MockedResponse<Record<string, any>, Record<string, any>> => x !== undefined
-    );
+    const mocks = mock ? [initMockedResponse, mock, useEffectCleanMock] : [initMockedResponse, useEffectCleanMock];
 
     const { result, waitForApolloMocks } = renderHook(
       () =>
@@ -61,6 +61,7 @@ describe('usePaginationQuery: Hook', () => {
     expect(firstItem?.id).toBe('item-1');
 
     expect(data?.allNotifications?.edges.length).toBe(initDataLength);
+    await waitForApolloMocks();
   });
 
   it('should fetch next page', async () => {
@@ -87,9 +88,9 @@ describe('usePaginationQuery: Hook', () => {
       result.current.loadNext();
     });
 
-    await waitForApolloMocks();
+    await waitForApolloMocks(1);
 
-    expect(result.current.data?.allNotifications?.edges.length).toBe(nextDataLength);
+    await waitFor(() => expect(result.current.data?.allNotifications?.edges.length).toBe(nextDataLength));
   });
 
   it('should fetch previous page', async () => {
@@ -110,7 +111,7 @@ describe('usePaginationQuery: Hook', () => {
       result.current.loadPrevious();
     });
 
-    await waitForApolloMocks();
+    await waitForApolloMocks(1);
 
     expect(result.current.data?.allNotifications?.edges.length).toBe(initDataLength);
   });

diff --git a/packages/webapp-libs/webapp-api-client/src/hooks/usePaginatedQuery/usePaginatedQuery.hook.ts b/packages/webapp-libs/webapp-api-client/src/hooks/usePaginatedQuery/usePaginatedQuery.hook.ts
@@ -62,33 +62,44 @@ export const usePaginatedQuery = <
   const { data, loading, fetchMore } = useQuery<A, CursorsInput & B>(query, options.hookOptions);
 
   useEffect(() => {
-    if (cachedCursors.includes(data?.[options.dataKey]?.pageInfo.endCursor)) {
-      setCachedCursors([]);
-    }
+    const currentEndCursor = data?.[options.dataKey]?.pageInfo.endCursor;
+    const isFirstEndCursor = cachedCursors.indexOf(currentEndCursor) === 0;
+    if (isFirstEndCursor) setCachedCursors([]);
   }, [data, cachedCursors, options.dataKey]);
 
   useEffect(() => {
     setHasPrevious(cachedCursors.length > 0);
     setHasNext(data?.[options.dataKey]?.pageInfo.hasNextPage ?? false);
   }, [data, cachedCursors.length, options.dataKey]);
 
+  useEffect(() => {
+    const setCacheToFirstPage = () => {
+      fetchMore({
+        updateQuery: (_, { fetchMoreResult }) => fetchMoreResult,
+      });
+    };
+
+    return setCacheToFirstPage;
+  }, [fetchMore]);
+
   const loadNext = useCallback(() => {
     const queryData = data?.[options.dataKey];
     const endCursor = queryData?.pageInfo.endCursor;
-    setCachedCursors((prev) => [...prev, endCursor]);
+
     fetchMore({
       variables: {
         after: endCursor,
       },
       updateQuery: (_, { fetchMoreResult }) => {
         return fetchMoreResult;
       },
+    }).then(() => {
+      setCachedCursors((prev) => [...prev, endCursor]);
     });
   }, [data, setCachedCursors, fetchMore, options.dataKey]);
 
   const loadPrevious = useCallback(() => {
     const newCachedCursors = cachedCursors.slice(0, -1);
-    setCachedCursors(newCachedCursors);
     const lastEndCursor = newCachedCursors.length > 0 ? newCachedCursors[newCachedCursors.length - 1] : undefined;
 
     fetchMore({
@@ -98,6 +109,8 @@ export const usePaginatedQuery = <
       updateQuery: (_, { fetchMoreResult }) => {
         return fetchMoreResult;
       },
+    }).then(() => {
+      setCachedCursors(newCachedCursors);
     });
   }, [cachedCursors, setCachedCursors, fetchMore]);
 

diff --git a/...mo/src/routes/crudDemoItem/crudDemoItemList/__tests__/crudDemoItemList.component.spec.tsx b/...mo/src/routes/crudDemoItem/crudDemoItemList/__tests__/crudDemoItemList.component.spec.tsx
@@ -41,6 +41,7 @@ describe('CrudDemoItemList: Component', () => {
         })
       ),
       fillCrudDemoItemPaginationListQuery(allItems, {}, { tenantId, first: 8 }),
+      fillCrudDemoItemPaginationListQuery(allItems, {}, { tenantId, first: 8 }),
     ];
     render(<Component />, { routerProps, apolloMocks });
 
@@ -50,7 +51,19 @@ describe('CrudDemoItemList: Component', () => {
 
   it('should render link to add new item form', async () => {
     const routerProps = createMockRouterProps(RoutesConfig.crudDemoItem.list);
-    const apolloMocks = [fillCommonQueryWithUser(), fillCrudDemoItemPaginationListQuery(allItems, {}, { first: 8 })];
+    const apolloMocks = [
+      fillCommonQueryWithUser(
+        currentUserFactory({
+          tenants: [
+            tenantFactory({
+              id: tenantId,
+            }),
+          ],
+        })
+      ),
+      fillCrudDemoItemPaginationListQuery(allItems, {}, { tenantId, first: 8 }),
+      fillCrudDemoItemPaginationListQuery(allItems, {}, { tenantId, first: 8 }),
+    ];
 
     render(<Component />, { routerProps, apolloMocks });