feat(console): introduce TanStack Query for client data fetching#284
Closed
jeroenrinzema wants to merge 1 commit into
Closed
feat(console): introduce TanStack Query for client data fetching#284jeroenrinzema wants to merge 1 commit into
jeroenrinzema wants to merge 1 commit into
Conversation
Adds @tanstack/react-query as the console's caching data layer and migrates the Users list view as the reference pattern. Infrastructure: - Shared QueryClient (lib/query-client.ts) with dashboard-tuned defaults (30s staleTime, single retry, focus revalidation). - Centralised query-key factory (lib/query-keys.ts) so mutations can invalidate lists and detail views by hierarchical prefix. - QueryClientProvider mounted in App; Devtools wired up in dev only. Users view migration: - Replaces the homegrown useResolver (no cache, no dedup, manual reload) with useQuery + keepPreviousData for flicker-free pagination/search. - Converts create + bulk-import to useMutation, refreshing the list via cache invalidation instead of an imperative reload() call. Remaining list views keep working unchanged; they can adopt the same pattern incrementally.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
The console's client-side data fetching is currently split across two patterns: React Router loaders for route-level data, and a homegrown
useResolverhook for in-component fetching.useResolverhas no caching, no request dedup, no background revalidation, and no mutation→invalidation wiring — every list view re-implements pagination by hand and refreshes after writes with an imperativereload().This PR introduces TanStack Query as the console's caching data layer and migrates the Users list view as the reference pattern. The remaining ~17 list views keep working unchanged and can adopt the same approach incrementally.
This is the first slice of the TanStack assessment — Query is the highest-leverage piece. Router (we're on React Router 7) and Form (react-hook-form) are intentionally left as-is.
What's in here
Infrastructure
lib/query-client.ts— sharedQueryClientwith dashboard-tuned defaults (30sstaleTime, single retry, focus revalidation).lib/query-keys.ts— centralised, hierarchical query-key factory so a mutation can invalidate lists and detail views by prefix.App.tsx— mountsQueryClientProvider; React Query Devtools enabled in dev only.Users view migration
useResolverforuseQuerywithkeepPreviousData, so paging and typing in search no longer flash an empty table.useMutation, refreshing the list via cache invalidation instead ofreload().isCreatingis now derived frommutation.isPending— one less piece of manual state.Notes / follow-ups
useResolver-based list views, and consider a shareduseSearchQueryhelper to remove the per-view pagination boilerplate.Verification
tsc --noEmitcleaneslintclean on changed filespnpm buildsucceeds (only pre-existing chunk-size / dynamic-import warnings)