Transition Global State from globalThis to TanStack Query

[Benjtalkshow]

Refactor: Migrate Global Store to TanStack Query

Overview

The current state management in lib/store.ts relies on globalThis.bountyStore, which introduces issues with Server-Side Rendering (SSR) and lacks modern debugging capabilities.

Since TanStack Query is already part of the project, we should migrate to it for managing both server state and local cached data. This will improve data synchronization, caching, and overall developer experience.

---

Goals

• Replace globalThis-based state with TanStack Query
• Centralize server and cache state management
• Improve SSR compatibility
• Leverage built-in caching, invalidation, and devtools

---

Implementation Details

1. Refactor Existing Store

Update: lib/store.ts

• Deprecate:
  • BountyStoreData class
• Migrate logic into TanStack Query patterns:
  • Use queryClient for reading/writing cached data
  • Replace imperative store methods with query + mutation patterns

---

2. Update Hooks

hooks/use-bounty.ts

• Replace store access with:
  • useQuery for fetching bounty data
  • queryClient.getQueryData for synchronous reads (if needed)
• Ensure proper query keys are used for caching and invalidation

hooks/use-submission-draft.ts

• Replace local store logic with:
  • useMutation for updates
  • onSuccess callbacks to update or invalidate relevant queries
• Store draft data in query cache where appropriate

---

3. Ensure Query Client Provider

Create or update: providers/query-client-provider.tsx

• Ensure a properly configured QueryClientProvider exists
• Add:
  • Global defaults (e.g., stale time, retry behavior)
  • Hydration logic for SSR (if applicable)

---

Files Affected

Modified

• lib/store.ts
• hooks/use-bounty.ts
• hooks/use-submission-draft.ts

Created / Verified

• providers/query-client-provider.tsx

---

Acceptance Criteria

• No usage of globalThis for state management
• BountyStoreData is fully deprecated
• Data fetching handled via useQuery
• Mutations handled via useMutation
• Query cache is the single source of truth
• No SSR-related issues introduced
• Proper query keys and invalidation strategy implemented

---

Testing Notes

• Verify data consistency across components
• Test cache updates after mutations
• Validate SSR hydration (if applicable)
• Ensure no regressions in bounty or draft workflows

---

Additional Notes

• Use structured query keys (e.g., ['bounty', id]) for scalability
• Avoid overusing getQueryData; prefer useQuery where possible
• Consider enabling TanStack Query DevTools for debugging
• Be mindful of cache invalidation to prevent stale UI

[linear]

BOU-140

[coderabbitai]

🔗 Related PRs

#30 - feat: Implement React Query hooks for managing bounties [merged]
#32 - feat: introduce TanStack Query integration for bounties, including query options, keys, and prefetching utilities. [merged]
#110 - feat: Implement Earnings & Payout Tracking [merged]
#115 - feat: replace hand-written bountyKeys with codegen-generated query keys [merged]
#118 - feat: replace Socket.IO real-time sync with GraphQL subscriptions [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!