feat: using tanstack query for search

Author: gnugomez

webui/package.json

@@ -50,6 +50,7 @@
         "@mui/x-charts": "^8.28.2",
         "@mui/x-data-grid": "^8.28.2",
         "@mui/x-date-pickers": "^8.27.2",
+        "@tanstack/react-query": "^5.99.0",
         "clipboard-copy": "^4.0.1",
         "clsx": "^1.2.1",
         "dompurify": "^3.0.4",

webui/src/default/default-app.tsx

@@ -14,6 +14,7 @@ import { HelmetProvider } from 'react-helmet-async';
 import { BrowserRouter } from 'react-router-dom';
 import { ThemeProvider } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ExtensionRegistryService } from '../extension-registry-service';
 import { Main } from '../main';
 import createPageSettings from './page-settings';
@@ -48,6 +49,8 @@ async function getServerVersion(): Promise<string> {
    }
 }
 
+const queryClient = new QueryClient();
+
 export const App = () => {
     const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
     const theme = useMemo(
@@ -57,14 +60,16 @@ export const App = () => {
 
     const pageSettings = createPageSettings(prefersDarkMode, service.serverUrl, getServerVersion());
     return (
-        <HelmetProvider>
-            <ThemeProvider theme={theme}>
-                <Main
-                    service={service}
-                    pageSettings={pageSettings}
-                />
-            </ThemeProvider>
-        </HelmetProvider>
+        <QueryClientProvider client={queryClient}>
+            <HelmetProvider>
+                <ThemeProvider theme={theme}>
+                    <Main
+                        service={service}
+                        pageSettings={pageSettings}
+                    />
+                </ThemeProvider>
+            </HelmetProvider>
+        </QueryClientProvider>
     );
 };
 

webui/src/hooks/extension-list/use-search.ts

@@ -0,0 +1,55 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { useContext } from 'react';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { MainContext } from '../../context';
+import { ExtensionFilter } from '../../extension-registry-service';
+import { SearchResult } from '../../extension-registry-types';
+
+export const SEARCH_QUERY_KEY = 'extension-search';
+
+const buildSearchUrl = (serverUrl: string, filter: ExtensionFilter & { offset: number }): URL => {
+    const url = new URL('/api/-/search', serverUrl);
+    if (filter.query)     url.searchParams.set('query',     filter.query);
+    if (filter.category)  url.searchParams.set('category',  filter.category);
+    if (filter.offset)    url.searchParams.set('offset',    String(filter.offset));
+    if (filter.size)      url.searchParams.set('size',      String(filter.size));
+    if (filter.sortBy)    url.searchParams.set('sortBy',    filter.sortBy);
+    if (filter.sortOrder) url.searchParams.set('sortOrder', filter.sortOrder);
+    return url;
+};
+
+export const useSearch = (filter: ExtensionFilter) => {
+    const { service } = useContext(MainContext);
+
+    return useInfiniteQuery({
+        queryKey: [SEARCH_QUERY_KEY, filter.query, filter.category, filter.sortBy, filter.sortOrder, filter.size],
+        queryFn: async ({ pageParam, signal }) => {
+            const url = buildSearchUrl(service.serverUrl, { ...filter, offset: pageParam });
+            return fetch(url, { signal }).then(res => res.json()) as Promise<SearchResult>;
+        },
+        initialPageParam: 0,
+        getNextPageParam: (lastPage, allPages) => {
+            const loadedCount = allPages.flatMap(p => p.extensions).length;
+            if (loadedCount < lastPage.totalSize && lastPage.extensions.length > 0) {
+                return loadedCount;
+            }
+            return undefined;
+        },
+        retry: 3,
+        retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30000),
+    });
+};
+
+export type UseSearchReturn = ReturnType<typeof useSearch>;

webui/src/pages/extension-list/extension-list.tsx

@@ -8,134 +8,38 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import { FunctionComponent, useContext, useEffect, useRef, useState } from 'react';
+import { FunctionComponent, useContext, useEffect, useMemo } from 'react';
 import InfiniteScroll from 'react-infinite-scroller';
 import { Box, Grid, CircularProgress, Container } from '@mui/material';
 import { ExtensionListItem } from './extension-list-item';
-import { isError, SearchEntry, SearchResult } from '../../extension-registry-types';
 import { ExtensionFilter } from '../../extension-registry-service';
-import { debounce } from '../../utils';
 import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
 import { MainContext } from '../../context';
+import { useSearch } from '../../hooks/extension-list/use-search';
 
 export const ExtensionList: FunctionComponent<ExtensionListProps> = props => {
-    const abortController = useRef<AbortController>(new AbortController());
-    const cancellationToken = useRef<{ timeout?: number }>({});
-    const enableLoadMore = useRef(false);
-    const lastRequestedPage = useRef(0);
-    const pageOffset = useRef(0);
-    const filterSize = useRef(props.filter.size ?? 10);
-    const context = useContext(MainContext);
-    const [extensions, setExtensions] = useState<SearchEntry[]>([]);
-    const [extensionKeys, setExtensionKeys] = useState<Set<string>>(new Set<string>());
-    const [appliedFilter, setAppliedFilter] = useState<ExtensionFilter>();
-    const [hasMore, setHasMore] = useState<boolean>(false);
-    const [loading, setLoading] = useState<boolean>(true);
+    const { handleError } = useContext(MainContext);
 
-    useEffect(() => {
-        enableLoadMore.current = true;
-        return () => {
-            abortController.current.abort();
-            clearTimeout(cancellationToken.current.timeout);
-            enableLoadMore.current = false;
-        };
-    }, []);
-
-    useEffect(() => {
-        filterSize.current = props.filter.size ?? filterSize.current;
-        debounce(
-            async () => {
-                try {
-                    const result = await context.service.search(abortController.current, props.filter);
-                    if (isError(result)) {
-                        throw result;
-                    }
-
-                    const searchResult = result as SearchResult;
-                    props.onUpdate(searchResult.totalSize);
-                    const actualSize = searchResult.extensions.length;
-                    pageOffset.current = lastRequestedPage.current;
-                    const extensionKeys = new Set<string>();
-                    for (const ext of searchResult.extensions) {
-                        extensionKeys.add(`${ext.namespace}.${ext.name}`);
-                    }
+    const { data, isFetching, fetchNextPage, hasNextPage, error } = useSearch(props.filter);
 
-                    setExtensions(searchResult.extensions);
-                    setExtensionKeys(extensionKeys);
-                    setAppliedFilter(props.filter);
-                    setHasMore(actualSize < searchResult.totalSize && actualSize > 0);
-                } catch (err) {
-                    context.handleError(err);
-                } finally {
-                    setLoading(false);
-                }
-            },
-            cancellationToken.current,
-            props.debounceTime
-        );
-    }, [props.filter.category, props.filter.query, props.filter.sortBy, props.filter.sortOrder, props.debounceTime]);
+    const extensions = useMemo(() => data?.pages.flatMap(p => p.extensions) ?? [], [data]);
+    const totalSize = useMemo(() => data?.pages[0]?.totalSize ?? 0, [data]);
 
-    const loadMore = async (p: number): Promise<void> => {
-        setLoading(true);
-        setHasMore(false);
-        lastRequestedPage.current = p;
-        const filter = copyFilter(appliedFilter as ExtensionFilter);
-        if (!isSameFilter(props.filter, filter)) {
-            return;
-        }
-        try {
-            filter.offset = (p - pageOffset.current) * filterSize.current;
-            const result = await context.service.search(abortController.current, filter);
-            if (isError(result)) {
-                throw result;
-            }
-
-            const newExtensions: SearchEntry[] = [];
-            const newExtensionKeys = new Set<string>();
-            newExtensions.push(...extensions);
-            extensionKeys.forEach((key) => newExtensionKeys.add(key));
-            const searchResult = result as SearchResult;
-            if (enableLoadMore.current && isSameFilter(props.filter, filter)) {
-                // Check for duplicate keys to avoid problems due to asynchronous user edit / loadMore call
-                for (const ext of searchResult.extensions) {
-                    const key = `${ext.namespace}.${ext.name}`;
-                    if (!extensionKeys.has(key)) {
-                        newExtensions.push(ext);
-                        newExtensionKeys.add(key);
-                    }
-                }
-
-                setExtensions(newExtensions);
-                setExtensionKeys(newExtensionKeys);
-                setHasMore(extensions.length < searchResult.totalSize && searchResult.extensions.length > 0);
-            }
-        } catch (err) {
-            context.handleError(err);
-        } finally {
-            setLoading(false);
-        }
-    };
+    useEffect(() => {
+        props.onUpdate(totalSize);
+    }, [totalSize]);
 
-    const isSameFilter = (f1: ExtensionFilter, f2: ExtensionFilter): boolean => {
-        return f1.category === f2.category && f1.query === f2.query && f1.sortBy === f2.sortBy && f1.sortOrder === f2.sortOrder;
-    };
+    useEffect(() => {
+        if (error) handleError(error);
+    }, [error]);
 
-    const copyFilter = (f: ExtensionFilter): ExtensionFilter => {
-        return {
-            query: f.query,
-            category: f.category || '',
-            size: f.size,
-            offset: f.offset,
-            sortBy: f.sortBy,
-            sortOrder: f.sortOrder
-        };
-    };
+    const loadMore = (): Promise<void> => fetchNextPage().then(() => undefined);
 
     const extensionList = extensions.map((ext, idx) => (
         <ExtensionListItem
             idx={idx}
             extension={ext}
-            filterSize={filterSize.current}
+            filterSize={props.filter.size ?? 10}
             key={`${ext.namespace}.${ext.name}`} />
     ));
 
@@ -144,10 +48,10 @@ export const ExtensionList: FunctionComponent<ExtensionListProps> = props => {
     </Box>;
 
     return <>
-        <DelayedLoadIndicator loading={loading}/>
+        <DelayedLoadIndicator loading={isFetching}/>
         <InfiniteScroll
             loadMore={loadMore}
-            hasMore={hasMore}
+            hasMore={!!hasNextPage}
             loader={loader}
             threshold={200} >
             <Container maxWidth='xl'>
@@ -163,4 +67,4 @@ export interface ExtensionListProps {
     filter: ExtensionFilter;
     debounceTime: number;
     onUpdate: (resultNumber: number) => void;
-}
+}

webui/yarn.lock

@@ -1693,6 +1693,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/query-core@npm:5.99.0":
+  version: 5.99.0
+  resolution: "@tanstack/query-core@npm:5.99.0"
+  checksum: 10/752c38122c772a8c511ffd927e003282a23a3ab6979b066d1d8b100a2061a5448096fce4cfc9e2d93a2ef468ffac5440a6181203b1456d12f6e51f69bcdc1a4d
+  languageName: node
+  linkType: hard
+
+"@tanstack/react-query@npm:^5.99.0":
+  version: 5.99.0
+  resolution: "@tanstack/react-query@npm:5.99.0"
+  dependencies:
+    "@tanstack/query-core": "npm:5.99.0"
+  peerDependencies:
+    react: ^18 || ^19
+  checksum: 10/aafbc87fc9c6c01c8ac8229d42ab209273f39f8284a72b8917c5fab39722b949b8dff2cf3b28487b2ebcb286bb08a377a42ed8a56dabe7f1ac4681c5af338401
+  languageName: node
+  linkType: hard
+
 "@tsconfig/node10@npm:^1.0.7":
   version: 1.0.12
   resolution: "@tsconfig/node10@npm:1.0.12"
@@ -5920,6 +5938,7 @@ __metadata:
     "@mui/x-date-pickers": "npm:^8.27.2"
     "@playwright/test": "npm:^1.58.0"
     "@stylistic/eslint-plugin": "npm:^5.9.0"
+    "@tanstack/react-query": "npm:^5.99.0"
     "@types/chai": "npm:^4.3.5"
     "@types/d3-scale": "npm:^4.0"
     "@types/d3-shape": "npm:^3.1"