Skip to content

core: implement React Query cache architecture with optimistic updates #84

Description

@EmeditWeb

Problem

Pages fetch data independently with ad-hoc query usage and no shared cache
strategy. After a mutation (deposit, vouch, product CRUD) other views keep
showing stale data until a manual refresh, there are no optimistic updates
or rollback, and query keys are inconsistent across services. This produces
visible inconsistencies (e.g. a new product not appearing on the vendor
detail page, pool stats not updating after a deposit).

Before Starting

Read ALL of these before writing any code:

  • context/architecture-context.md
  • context/code-standards.md

What To Build

A React Query cache architecture standardized across the services layer:

  1. A central query-key factory so every entity (pool, loans, vouches,
    vendors, reputation) has canonical, hierarchical keys.
  2. A mutation → invalidation map so each mutation invalidates exactly the
    affected query subtrees on success.
  3. An optimistic-update pattern with rollback for the high-frequency
    mutations (vouch accept/decline, product CRUD, deposit/withdraw).
  4. Sensible staleTime / gcTime defaults and a documented convention that
    new services must follow.

Files To Touch

  • src/services/queryKeys.ts (new)
  • src/services/*.service.ts (adopt keys + invalidation)
  • src/hooks/* (optimistic mutation helpers)
  • relevant page components

Acceptance Criteria

  • Canonical query-key factory used by all services
  • Mutations invalidate the correct query subtrees on success
  • Optimistic updates with rollback on the listed high-frequency mutations
  • Stale data no longer shown across views after a mutation
  • Tests cover invalidation and optimistic rollback behavior

Mandatory Checks Before Opening PR

  • All context/ files read and understood
  • npm run lint passes with zero errors
  • npm run build passes with zero errors
  • npm test passes — test count not decreased
  • No hardcoded hex colors; icons from lucide-react only
  • No API calls in page files
  • Tested on 375px mobile viewport
  • PR references this issue number

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions