Skip to content

Migrate from store-based fetch to React Query (useQuery) for data fetching#7

Draft
Copilot wants to merge 4 commits intomainfrom
copilot/fix-6
Draft

Migrate from store-based fetch to React Query (useQuery) for data fetching#7
Copilot wants to merge 4 commits intomainfrom
copilot/fix-6

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Jul 4, 2025

This PR migrates the application from using Zustand stores with custom fetch methods to React Query's useQuery hooks for better data fetching and caching.

Changes Made

🔄 Data Fetching Migration

  • Replaced store-based fetching: Removed useHomeStore and usePeerStore with their fetch methods
  • Added React Query: Integrated @tanstack/react-query with proper configuration
  • Updated views: Home and Peers views now use useQuery hooks with automatic background refetching

📁 Code Organization

  • Moved API types: Created src/types/ directory and moved all API response interfaces from src/store/types.ts
  • Created API services: Added src/store/api/bitcoinApi.ts with typed service functions for bitcoin endpoints
  • Simplified refresh logic: Replaced complex useRefreshStore with simpler useRefreshTimeStore that only manages intervals

🧹 Cleanup

  • Removed unused code:
    • src/hooks/useRefreshData.ts
    • src/store/refreshStore.ts
    • src/store/homeStore.ts
    • src/store/peerStore.ts
    • src/store/types.ts
  • Updated components: RefreshTimer now uses React Query's invalidateQueries() for manual refresh

✨ Benefits

  • Better UX: React Query provides built-in loading states, error handling, and background updates
  • Reduced complexity: Eliminated unnecessary store boilerplate and custom refresh logic
  • Type safety: Maintained strong typing with centralized API response types
  • Performance: React Query's intelligent caching reduces redundant network requests

Before/After Comparison

Before: Store-based with manual refresh handling

const homeStore = useHomeStore();
useRefreshData([homeStore]);
// Data: homeStore.main.totalConnections
// Loading: homeStore.loading

After: React Query with automatic refresh

const { data: homeData, isLoading } = useQuery({
  queryKey: ['bitcoin', 'home'],
  queryFn: bitcoinApi.home,
  refetchInterval: refreshTimeStore.refreshTime > 0 ? refreshTimeStore.refreshTime : false,
});
// Data: homeData?.main.totalConnections ?? 0
// Loading: isLoading

All functionality is preserved while providing a cleaner, more maintainable architecture.

Fixes #6.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Copilot AI and others added 3 commits July 4, 2025 08:31
Co-authored-by: MontejoJorge <56157795+MontejoJorge@users.noreply.github.com>
Co-authored-by: MontejoJorge <56157795+MontejoJorge@users.noreply.github.com>
Co-authored-by: MontejoJorge <56157795+MontejoJorge@users.noreply.github.com>
Copilot AI changed the title [WIP] use useQuery for pages queries Migrate from store-based fetch to React Query (useQuery) for data fetching Jul 4, 2025
Copilot AI requested a review from MontejoJorge July 4, 2025 08:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

use useQuery for pages queries

2 participants