feat: migrate useStacApi hook to TanStack Query

- Refactor useStacApi to use TanStack Query for fetching and caching
- Add QueryClientProvider to wrapper to ensure a clean instance for every test
- Refactor useStacSearch.test.ts to use setupStacSearch helper for all tests, adding a step to wait for IDLE stacApi

Author: AliceR

src/hooks/useCollections.ts

@@ -51,7 +51,6 @@ function useCollections(): StacCollectionsHook {
   });
 
   // Sync collections with context
-  // This preserves the previous logic for consumers and tests
   useEffect(() => {
     if (collections) {
       setCollections(collections);
@@ -63,13 +62,14 @@ function useCollections(): StacCollectionsHook {
   const reload = useMemo(() => debounce(refetch), [refetch]);
 
   useEffect(() => {
-    // Map TanStack Query loading states to previous LoadingState type
-    if (isLoading || isFetching) {
+    if (!stacApi) {
+      setState('IDLE');
+    } else if (isLoading || isFetching) {
       setState('LOADING');
     } else {
       setState('IDLE');
     }
-  }, [isLoading, isFetching]);
+  }, [stacApi, isLoading, isFetching]);
 
   return {
     collections,

src/hooks/useStacApi.ts

@@ -1,46 +1,38 @@
-import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import StacApi, { SearchMode } from '../stac-api';
 import { Link } from '../types/stac';
 import { GenericObject } from '../types';
 
 type StacApiHook = {
   stacApi?: StacApi;
+  isLoading: boolean;
+  isError: boolean;
 };
 
 function useStacApi(url: string, options?: GenericObject): StacApiHook {
-  const [stacApi, setStacApi] = useState<StacApi>();
-
-  useEffect(() => {
-    let baseUrl: string;
-    let searchMode = SearchMode.GET;
-
-    fetch(url, {
-      headers: {
-        'Content-Type': 'application/json',
-        ...options?.headers,
-      },
-    })
-      .then((response) => {
-        baseUrl = response.url;
-        return response;
-      })
-      .then((response) => response.json())
-      .then((response) => {
-        const doesPost = response.links.find(
-          ({ rel, method }: Link) => rel === 'search' && method === 'POST'
-        );
-        if (doesPost) {
-          searchMode = SearchMode.POST;
-        }
-      })
-      .then(() => setStacApi(new StacApi(baseUrl, searchMode, options)))
-      .catch((e) => {
-        // eslint-disable-next-line no-console
-        console.error('Failed to initialize StacApi:', e);
+  const { data, isSuccess, isLoading, isError } = useQuery({
+    queryKey: ['stacApi', url, options],
+    queryFn: async () => {
+      let searchMode = SearchMode.GET;
+      const response = await fetch(url, {
+        headers: {
+          'Content-Type': 'application/json',
+          ...options?.headers,
+        },
       });
-  }, [url, options]);
-
-  return { stacApi };
+      const baseUrl = response.url;
+      const json = await response.json();
+      const doesPost = json.links?.find(
+        ({ rel, method }: Link) => rel === 'search' && method === 'POST'
+      );
+      if (doesPost) {
+        searchMode = SearchMode.POST;
+      }
+      return new StacApi(baseUrl, searchMode, options);
+    },
+    staleTime: Infinity,
+  });
+  return { stacApi: isSuccess ? data : undefined, isLoading, isError };
 }
 
 export default useStacApi;