Merge pull request #28304 from backstage/catalog-offset-fix-refetch

Catalog: fix refetch in offset mode

.changeset/nasty-pears-taste.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Fixed an issue where the `<EntityListProvider />` in `offset` mode would unnecessarily re-fetch data when the filter didn't change, causing a flicker effect.

plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx

@@ -555,7 +555,7 @@ describe('<EntityListProvider pagination />', () => {
   });
 });
 
-describe('<EntityListProvider pagination={{mode: offset}} />', () => {
+describe(`<EntityListProvider pagination={{ mode: 'offset' }} />`, () => {
   const origReplaceState = window.history.replaceState;
   const pagination: EntityListPagination = { mode: 'offset' };
   const limit = 20;
@@ -688,6 +688,18 @@ describe('<EntityListProvider pagination={{mode: offset}} />', () => {
     await waitFor(() => {
       expect(mockCatalogApi.queryEntities).toHaveBeenCalledTimes(2);
     });
+
+    act(() =>
+      result.current.updateFilters({
+        user: EntityUserFilter.owned(ownershipEntityRefs),
+      }),
+    );
+
+    await expect(() =>
+      waitFor(() => {
+        expect(mockCatalogApi.queryEntities).toHaveBeenCalledTimes(3);
+      }),
+    ).rejects.toThrow();
   });
 
   it('fetch when limit change', async () => {
@@ -723,7 +735,7 @@ describe('<EntityListProvider pagination={{mode: offset}} />', () => {
     expect(result.current.backendEntities.length).toBe(2);
     expect(mockCatalogApi.queryEntities).toHaveBeenCalledTimes(1);
 
-    await act(async () => {
+    act(() => {
       result.current.updateFilters({
         kind: new EntityKindFilter('api', 'API'),
       });
@@ -750,7 +762,7 @@ describe('<EntityListProvider pagination={{mode: offset}} />', () => {
     expect(result.current.backendEntities.length).toBe(2);
     expect(mockCatalogApi.queryEntities).toHaveBeenCalledTimes(1);
 
-    await act(async () => {
+    act(() => {
       result.current.setOffset!(5);
       result.current.setOffset!(10);
     });

plugins/catalog-react/src/hooks/useEntityListProvider.tsx

@@ -173,7 +173,7 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>(
       : 'none';
   };
 
-  const paginationMode: PaginationMode = getPaginationMode();
+  const paginationMode = getPaginationMode();
   const paginationLimit =
     typeof props.pagination === 'object' ? props.pagination.limit ?? 20 : 20;
 
@@ -227,7 +227,7 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>(
         appliedFilters: {} as EntityFilters,
         entities: [],
         backendEntities: [],
-        pageInfo: paginationMode === 'cursor' ? {} : undefined,
+        pageInfo: {},
         offset,
         limit,
       };
@@ -279,7 +279,8 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>(
           );
 
           if (
-            paginationMode === 'offset' ||
+            (paginationMode === 'offset' &&
+              (outputState.limit !== limit || outputState.offset !== offset)) ||
             !isEqual(previousBackendFilter, backendFilter)
           ) {
             const response = await catalogApi.queryEntities({