perf(app): install @tanstack/react-query and add QueryClientProvider (closes #345 phase A) - #455
Merged
Xhristin3 merged 2 commits intoJul 25, 2026
Conversation
…loses XStreamRollz#345 phase A) Foundation for the new client-side cache layer. Phase A only wires the provider; consumers come in phase B. - app/package.json: add @tanstack/react-query ^5.62.0. - app/src/app/providers.tsx (NEW): AppProviders wraps children in a QueryClientProvider. Browser singleton vs per-request SSR client (no leak across users). Defaults: staleTime 30s (matches lib/cache/cache-config.ts), refetchOnWindowFocus true, retry 1, mutations retry 0. - app/src/app/providers.test.tsx (NEW): verifies client is exposed, shared across nested consumers, and useQuery resolves end-to-end. - app/layout.tsx: wrap children with AppProviders inside AuthProvider.
shadrackmanfred
added a commit
to shadrackmanfred/XStreamRoll
that referenced
this pull request
Jul 24, 2026
…lz#345 phase B) Three issues were causing the quality CI check to fail: 1. Added @tanstack/react-query to app/package.json (dependency was only in PR XStreamRollz#455) 2. Added Tag type and tags field on Stream in @xstreamroll/types (was only in PR XStreamRollz#454) 3. Updated lockfiles for npm ci reproducibility
…llz#455 CI fix) The test for useQuery resolution used act + Promise.resolve() which only flushes a single microtask. React Query requires multiple async ticks to resolve. Using waitFor retries until the assertion passes.
Contributor
|
Thanks @shadrackmanfred for laying the foundation. Merged. |
Closed
5 tasks
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
2 participants
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.
Summary
Installs
@tanstack/react-queryand wiresQueryClientProviderinto the app layout. This is Phase A of the react-query migration for the dashboard (closes #345 phase A). Phase B (PR #456) adds the consumer hooks and optimistic mutations.Changes
app/package.json— added@tanstack/react-query(^5.62.0) dependency.app/src/app/providers.tsx(NEW) — lazyQueryClientinitializer in a"use client"component:staleTimematchinglib/cache/cache-config.ts#streamList.gcTimefor background cache retention.refetchOnWindowFocus: trueso the dashboard refreshes when the user returns to the tab.retry: 1for queries (transient blips),retry: 0for mutations.app/layout.tsx— wraps{children}in<AppProviders>inside<AuthProvider>.app/src/app/providers.test.tsx(NEW) — verifies the client is shared across consumers and thatuseQueryresolves through the provider.CI fix
lets useQuery return data after a successful fetchtest by replacingact + Promise.resolve()withwaitFor— React Query requires multiple async ticks to resolve, andwaitForproperly retries until the assertion passes.Behaviour
QueryClientis a singleton on the browser (survives route transitions), and each SSR request gets its own.useStreamList,useStreamDetail,useAttachTag,useDetachTagand migrate the dashboard components.Quality bar
tsc --noEmit).