Evaluate migrating from manual fetching to TanStack Query

[bburda]

Summary

Evaluate migrating from manual fetch + Zustand to TanStack Query (React Query) for server state management. This could significantly simplify data fetching, caching, and synchronization.

---

Proposed solution

Current Approach (Manual)

// Current: Manual state + fetching in Zustand
const useAppStore = create((set, get) => ({
  selectedEntity: null,
  isLoadingDetails: false,

  selectEntity: async (path) => {
    set({ isLoadingDetails: true });
    try {
      const details = await client.getEntityDetails(path);
      set({ selectedEntity: details, isLoadingDetails: false });
    } catch (error) {
      toast.error('Failed to load');
      set({ isLoadingDetails: false });
    }
  },
}));

TanStack Query Approach

// With TanStack Query: Declarative data fetching
function useEntityDetails(path: string | null) {
  return useQuery({
    queryKey: ['entity', path],
    queryFn: () => client.getEntityDetails(path!),
    enabled: !!path,
    staleTime: 30_000, // Consider fresh for 30s
    retry: 2,
  });
}

// In component
function EntityDetailPanel() {
  const selectedPath = useAppStore(s => s.selectedPath);
  const { data, isLoading, error, refetch } = useEntityDetails(selectedPath);

  if (isLoading) return <Skeleton />;
  if (error) return <ErrorPanel error={error} onRetry={refetch} />;
  return <EntityDetails entity={data} />;
}

Benefits

Feature	Manual (Current)	TanStack Query
Caching	Manual Map	Automatic, normalized
Refetch on focus	Manual	Built-in
Retry logic	Manual	Built-in
Loading states	Manual per-fetch	Automatic
Error handling	Manual	Automatic
Stale-while-revalidate	Not implemented	Built-in
Request deduplication	Not implemented	Automatic
Devtools	None	React Query Devtools
Mutations	Manual	useMutation with optimistic updates