feat: wire up TanStack Query (SSR-aware) with a live example#49
Merged
Conversation
) TanStack Query was advertised across the stack docs but never actually wired up — a runtime dep imported nowhere. Integrate it properly: - app/router.tsx: create a QueryClient and use `routerWithQueryClient` so query data prefetched in loaders is dehydrated on the server and hydrated on the client automatically; provide it via context + a QueryClientProvider Wrap. - app/routes/__root.tsx: switch to createRootRouteWithContext<RouterContext>() so loaders get a typed `context.queryClient`. - app/routes/index.tsx: live example — a server-function-backed query prefetched in the loader (ensureQueryData) and read with useSuspenseQuery, alongside the existing getWelcome server-function demo. - Add @tanstack/react-router-with-query (pinned exact 1.114.35 in pnpm.overrides, matching the rest of the TanStack set). - docs/agents/api.md: document query-vs-server-function and the SSR prefetch pattern. Verified: tsc, vitest (31), biome, vinxi build all pass; and serving the production build shows the SSR-prefetched query data ("First item"/"Second item") in the rendered HTML (dehydration works), homepage 200, stylesheet resolves, no server errors. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
1 participant
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.
Closes #41.
TanStack Query was advertised across every stack list but never wired up — a runtime dependency imported nowhere. This integrates it the SSR-aware way.
Changes
app/router.tsx— create aQueryClientand wrap the router withrouterWithQueryClient, so data prefetched in a loader is dehydrated on the server and hydrated on the client automatically. Provided via routercontext+ aQueryClientProviderWrap.app/routes/__root.tsx—createRootRouteWithContext<RouterContext>()so loaders get a typedcontext.queryClient.app/routes/index.tsx— live example: a server-function-backed query prefetched in the loader (ensureQueryData) and read withuseSuspenseQuery, side by side with the existinggetWelcomeserver-function demo. (queryFn is a server function → no self-fetch.)@tanstack/react-router-with-query, pinned exact1.114.35inpnpm.overridesalongside the rest of the TanStack set.docs/agents/api.md— documents query-vs-server-function and the SSR prefetch pattern.Verification
tsc✓ ·vitest31 ✓ ·biome check .✓ ·vinxi build✓ — and serving the production build shows the SSR-prefetched query data (First item/Second item) in the rendered HTML (dehydration works end-to-end), homepage200, stylesheet resolves, no server errors. Lockfile stays a coherent1.114.xset.🤖 Generated with Claude Code