feat(frontend): adopt backend v0.7.0 cursor API with TanStack Query - #7
Conversation
Point the monorepo template's backend submodule at elysia-boilerplate
v0.6.0 (264a2b7). The users API changed in a breaking way: GET /users
moved from offset/total to cursor pagination ({ limit, cursor } ->
{ users, nextCursor }), and POST /users now returns 409 with a { message }
body on email conflict (was 422 with a string).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Migrate the monorepo template frontend to the backend v0.6.0 contract and
upgrade its dependencies.
- Replace offset/total list loading with cursor pagination via TanStack
Query's useInfiniteQuery (infiniteQueryOptions in features/users/queries.ts);
"Load more" uses fetchNextPage/hasNextPage.
- Handle the new 409 { message } conflict error in the create form.
- Refresh the list after create with queryClient.invalidateQueries.
- Add QueryClientProvider with sane defaults (staleTime, retry,
refetchOnWindowFocus).
- Keep already-loaded users visible on refetch/next-page errors, surface the
error inline, and announce the create-form error via role="alert".
- Add elysia as a direct dependency so eden resolves the backend's version
(dedupe), upgrade all frontend deps, and bump Biome config to 2.5.0.
- Map backend src/* in tsconfig so Eden can infer the App type; merge the
Vitest config into vite.config.ts; ignore test files in the router plugin.
- Add component tests: list render, pagination, empty state, initial-load and
next-page errors, create conflict, and submit payload.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughThe monorepo frontend template gains React Query with infinite cursor-based pagination for the users list. A ChangesReact Query Infinite Pagination Feature
Tooling Updates
Build Artifact Filtering
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@templates/monorepo/apps/backend`:
- Line 1: The backend submodule in templates/monorepo/apps/backend is pinned to
an incorrect commit (264a2b7b) that contains rate-limiting refactoring changes
dated after the v0.6.0 release. Update the submodule commit reference to
e5094c8e5d8c717d7db9faec54d5ac61af8edeb5, which is the actual v0.6.0 release
tag. This ensures the frontend changes in this PR, which depend on the v0.6.0
API contract including cursor-based pagination and 409 conflict responses, will
work correctly with the backend.
In `@templates/monorepo/apps/frontend/package.json`:
- Line 49: Remove the vitest dependency from devDependencies in the package.json
file (the line containing "vitest": "^4.1.9"). Next, remove or update any vitest
configuration files if they exist (such as vitest.config.ts or vitest
configuration in package.json). Finally, update the test scripts in package.json
to use "bun test" instead of vitest commands, ensuring all test files matching
the pattern **/*.test.{ts,tsx,js,jsx} will be executed using Bun's built-in test
runner as per the coding guidelines.
In `@templates/monorepo/apps/frontend/src/features/users/queries.ts`:
- Around line 10-12: In the error handling block where you check if error
exists, the `error.value.message` access is unsafe because `error.value` is
typed as `unknown`. Replace the direct property access with optional chaining by
changing `error.value.message` to `error.value?.message` to safely handle cases
where the value is undefined, null, or lacks a message property.
In `@templates/monorepo/apps/frontend/src/routes/users/users.test.tsx`:
- Around line 1-20: The test file in users.test.tsx is currently importing test
utilities from vitest (specifically describe, expect, it, vi, afterEach, and
beforeEach) which violates the coding guidelines that require using Bun's
built-in test runner. Replace the vitest import statement with Bun's test API
imports, which provides Jest-compatible functionality. Update all references
from vitest imports to use Bun's test utilities instead, ensuring that vi.mock
and vi.fn calls are replaced with their Bun equivalents for mocking
functionality.
In `@templates/monorepo/apps/frontend/vite.config.ts`:
- Line 6: The vite.config.ts file violates coding guidelines by importing from
'vitest/config' and using Vitest for test configuration instead of bun test.
Replace the import statement that references 'vitest/config' with configuration
appropriate for bun test, and remove or update all Vitest-specific test
configuration in the file (including the sections around lines 28-30) to align
with the guideline requiring bun test for all test files. The entire Vite-based
setup should be reconsidered in favor of using Bun.serve() with HTML imports and
bun build for frontend bundling as specified in the coding guidelines.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c109b415-b260-4e9c-a45a-fa60b5bc98a9
⛔ Files ignored due to path filters (1)
templates/monorepo/bun.lockis excluded by!**/*.lock
📒 Files selected for processing (13)
templates/monorepo/apps/backendtemplates/monorepo/apps/frontend/biome.jsontemplates/monorepo/apps/frontend/package.jsontemplates/monorepo/apps/frontend/src/features/users/queries.tstemplates/monorepo/apps/frontend/src/main.tsxtemplates/monorepo/apps/frontend/src/routeTree.gen.tstemplates/monorepo/apps/frontend/src/routes/users/index.tsxtemplates/monorepo/apps/frontend/src/routes/users/new.tsxtemplates/monorepo/apps/frontend/src/routes/users/users.test.tsxtemplates/monorepo/apps/frontend/tsconfig.jsontemplates/monorepo/apps/frontend/vite.config.tstemplates/monorepo/biome.jsontemplates/monorepo/package.json
Re-pin the backend submodule from main HEAD (264a2b7, an untagged commit one past v0.6.0) to the tagged v0.7.0 release (007a897). v0.7.0 is identical in code to the previously pinned commit — only the version bump and changelog differ — so the frontend contract (cursor pagination, 409 conflict) is unchanged. Pinning a tagged release instead of a moving main commit keeps the template reproducible. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Use optional chaining (error.value?.message) in the users query and create form. Eden's error.value can be absent for some non-2xx responses, so the ?? fallback now applies instead of throwing on a property access. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Import defineConfig from 'vite' and add a /// <reference types="vitest/config" /> directive instead of importing defineConfig from 'vitest/config'. This keeps the single shared config (tests run through the same plugins/aliases as the build) while the build config imports only from vite — the test-field typing now comes from a compile-time type reference with no runtime vitest value import. This is the form documented by Vitest for existing Vite projects. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The prepare script zipped the entire templates/ tree, so running it from a working copy that had installed template dependencies (or a built frontend, or a local .env) would bundle those artifacts into the published archive. Add a filter to addLocalFolder that skips node_modules, dist, .git, and .env, so the shipped templates.zip is correct and minimal regardless of local state, while still preserving .gitignore / .env.example files. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Biome (2.3.10 in CI) wraps the long exclusion-regex assignment onto its own line. Apply the formatter so 'biome ci .' passes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the singular/plural user-count label with a generic "items" string in the users list template. Drops the conditional pluralization in favor of a simpler, reusable label for the monorepo frontend template. Co-Authored-By: Skrrt Bot <bot@skrrt.sh>
|
@coderabbitai is this pr ready to be merged? |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
REPO="truehazker/create-ely"
PR=7
echo "=== PR Status ==="
gh pr view $PR --repo $REPO --json state,mergeable,mergeStateStatus,reviewDecision,checksUrl,title,isDraft,reviews,statusCheckRollup
echo ""
echo "=== Open Review Comments (unresolved) ==="
gh api graphql -F owner="truehazker" -F name="create-ely" -F pr=$PR -f query='
query($owner: String!, $name: String!, $pr: Int!) {
repository(owner: $owner, name: $name) {
pullRequest(number: $pr) {
reviewThreads(first: 50) {
nodes {
isResolved
isOutdated
comments(first: 1) {
nodes {
author { login }
body
path
line
}
}
}
}
}
}
}' --jq '.data.repository.pullRequest.reviewThreads.nodes[] | select(.isResolved == false and .isOutdated == false) | {path: .comments.nodes[0].path, line: .comments.nodes[0].line, author: .comments.nodes[0].author.login, body: (.comments.nodes[0].body | .[0:100])}'
echo ""
echo "=== CI Checks ==="
gh pr checks $PR --repo $REPOLength of output: 2033 🏁 Script executed: #!/bin/bash
set -euo pipefail
REPO="truehazker/create-ely"
PR=7
echo "=== PR Status ==="
gh pr view $PR --repo $REPO --json state,mergeable,mergeStateStatus,reviewDecision,title,isDraft,reviews,statusCheckRollup
echo ""
echo "=== Open Review Comments (unresolved) ==="
gh api graphql -F owner="truehazker" -F name="create-ely" -F pr=$PR -f query='
query($owner: String!, $name: String!, $pr: Int!) {
repository(owner: $owner, name: $name) {
pullRequest(number: $pr) {
reviewThreads(first: 50) {
nodes {
isResolved
isOutdated
comments(first: 1) {
nodes {
author { login }
body
path
line
}
}
}
}
}
}
}' --jq '.data.repository.pullRequest.reviewThreads.nodes[] | select(.isResolved == false and .isOutdated == false) | {path: .comments.nodes[0].path, line: .comments.nodes[0].line, author: .comments.nodes[0].author.login, body: (.comments.nodes[0].body | .[0:100])}'
echo ""
echo "=== CI Checks ==="
gh pr checks $PR --repo $REPOLength of output: 10016
The only blocker is that the branch protection rule requires at least one approving review. Everything else looks good. Would you like me to approve the PR? |
The bundled @types/react now flags `React.FormEvent` as deprecated (TS6385) in favor of event-specific types. The user-create form's onSubmit handler is typed `SubmitEventHandler`, so switch its parameter to `React.SubmitEvent<HTMLFormElement>`. `React.ChangeEvent` is not deprecated and is left unchanged. Clears the only TS6385 suggestion diagnostic in the scaffold; tsc and biome remain clean across frontend, backend, and CLI. Co-Authored-By: Skrrt Bot <bot@skrrt.sh>
Summary
Updates the monorepo template to the tagged backend release v0.7.0 and migrates its frontend to the new API contract, modernising data fetching with TanStack Query.
007a897). Breaking API changes vs the prior pin:GET /usersmoved fromoffset/totalto cursor pagination ({ limit, cursor }→{ users, nextCursor });POST /usersnow returns409 { message }on email conflict (was422string).@tanstack/react-query:useInfiniteQuery(infiniteQueryOptionsinfeatures/users/queries.ts) with a Load more button (fetchNextPage/hasNextPage).409 { message }error and refreshes the list viaqueryClient.invalidateQueries.QueryClientProvideradded with sane defaults (staleTime,retry,refetchOnWindowFocus).role="alert".error.valueread with optional chaining.elysiaas a direct dep so eden resolves the backend's exact version (dedupe → singleelysia@1.4.29), upgraded all frontend deps, and bumped Biome config to 2.5.0.tsconfigmaps backendsrc/*so Eden infers theApptype; Vitest config merged intovite.config.ts; router ignores*.test.tsxfiles.Test plan
bunx tsc --noEmit— 0 errorsbunx vitest run— 7/7 passing (list, pagination, empty, initial-load error, next-page error, create conflict, submit payload)bunx biome check .— cleanbun run build— succeeds,dist/emittedbun run dev): create user, cursor pagination, 409 conflict, list refresh after createNotes
bun test/"no vite" guidance applies to the create-ely CLI tool, not the generated template (Vitest pre-existed; only the version was bumped).templates.zipis gitignored and regenerated from the pinned submodule at publish time, so only the submodule pointer is committed.🤖 Generated with Claude Code
Summary by CodeRabbit
/usersand/users/new, including pagination and error/empty states.