docs: update TanStack Start guide for RC APIs#1275
docs: update TanStack Start guide for RC APIs#1275juliusmarminge wants to merge 3 commits intomainfrom
Conversation
Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughUpdated TanStack Start documentation: standardized "TanStack" casing, changed release-status note to reference "v1 RC server-route conventions," updated example paths from Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
📦 Bundle size comparison
|
Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
| <Note> | ||
| TanStack Start server routes now live directly in your `src/routes` tree, so | ||
| `src/routes/api/uploadthing.ts` automatically serves `/api/uploadthing`. For | ||
| more information, please refer to the [TanStack Start server-routes | ||
| docs](https://tanstack.com/start/latest/docs/framework/react/guide/server-routes). | ||
| </Note> |
There was a problem hiding this comment.
@cursoragent this note can be removed i tihnk
There was a problem hiding this comment.
Summary
- Removed the redundant second note under the TanStack Start API-route section, keeping the path-specific note and the code sample intact.
page.mdx:101-132 - Committed the review follow-up in
edea732cand pushed it tocursor/update-tanstack-start-doc-4936.
Testing
- ✅
pnpm exec prettier --check "docs/src/app/(docs)/getting-started/tanstack-start/page.mdx"— enough for this tiny docs-only follow-up because the change only deleted redundant MDX text and did not alter code examples.
Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
Greptile SummaryThis PR updates the TanStack Start getting-started guide from stale beta/alpha patterns (
Confidence Score: 4/5Safe to merge after resolving the redundant notes and ideally updating the example file to match. All findings are P2; the core API changes are correct and verified against the official TanStack Start RC docs. The score is 4 rather than 5 because the example file divergence (old vs. new API in the same repo) is a real developer-experience concern that should be addressed before or alongside this PR. examples/minimal-tanstack-start/src/routes/api.uploadthing.ts — still uses createServerFileRoute, inconsistent with the new docs Important Files Changed
Sequence DiagramsequenceDiagram
participant Client
participant TanStackRoute as createFileRoute("/api/uploadthing")
participant Handler as createRouteHandler
participant UploadThing as UploadThing Server
Client->>TanStackRoute: GET /api/uploadthing
TanStackRoute->>Handler: server.handlers.GET({ request })
Handler->>UploadThing: Process request via uploadRouter
UploadThing-->>Handler: Response
Handler-->>TanStackRoute: Response
TanStackRoute-->>Client: Response
Client->>TanStackRoute: POST /api/uploadthing
TanStackRoute->>Handler: server.handlers.POST({ request })
Handler->>UploadThing: Handle upload via uploadRouter
UploadThing-->>Handler: Response
Handler-->>TanStackRoute: Response
TanStackRoute-->>Client: Response
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| <Note> | ||
| File path here doesn't matter, you can serve this from any route. We recommend | ||
| serving it from `/api/uploadthing`. | ||
| TanStack Start server routes can live anywhere under `src/routes`, but this | ||
| guide uses `src/routes/api/uploadthing.ts` so the endpoint is served from | ||
| `/api/uploadthing`. | ||
| </Note> | ||
|
|
||
| <Warning> | ||
| Make sure to configure API entry handler in `app/api.ts`. For more | ||
| information, please refer to the [@tanstack/start | ||
| docs](https://tanstack.com/router/latest/docs/framework/react/start/api-routes#setting-up-the-entry-handler). | ||
| </Warning> | ||
|
|
||
| ```ts {{ title: "app/routes/api/uploadthing.ts" }} | ||
| import { createAPIFileRoute } from "@tanstack/start/api"; | ||
| ```ts {{ title: "src/routes/api/uploadthing.ts" }} | ||
| import { createFileRoute } from "@tanstack/react-router"; | ||
|
|
||
| import { createRouteHandler } from "uploadthing/server"; | ||
|
|
||
| import { uploadRouter } from "../../server/uploadthing"; |
There was a problem hiding this comment.
<Note> blocks
Both notes explain the same thing: TanStack Start server routes live in src/routes and src/routes/api/uploadthing.ts maps to /api/uploadthing. The first is fully redundant once the second is present (the second adds the external docs link). Consider collapsing them into one:
| <Note> | |
| File path here doesn't matter, you can serve this from any route. We recommend | |
| serving it from `/api/uploadthing`. | |
| TanStack Start server routes can live anywhere under `src/routes`, but this | |
| guide uses `src/routes/api/uploadthing.ts` so the endpoint is served from | |
| `/api/uploadthing`. | |
| </Note> | |
| <Warning> | |
| Make sure to configure API entry handler in `app/api.ts`. For more | |
| information, please refer to the [@tanstack/start | |
| docs](https://tanstack.com/router/latest/docs/framework/react/start/api-routes#setting-up-the-entry-handler). | |
| </Warning> | |
| ```ts {{ title: "app/routes/api/uploadthing.ts" }} | |
| import { createAPIFileRoute } from "@tanstack/start/api"; | |
| ```ts {{ title: "src/routes/api/uploadthing.ts" }} | |
| import { createFileRoute } from "@tanstack/react-router"; | |
| import { createRouteHandler } from "uploadthing/server"; | |
| import { uploadRouter } from "../../server/uploadthing"; | |
| <Note> | |
| TanStack Start server routes live directly in your `src/routes` tree, so | |
| `src/routes/api/uploadthing.ts` automatically serves `/api/uploadthing`. For | |
| more information, please refer to the [TanStack Start server-routes | |
| docs](https://tanstack.com/start/latest/docs/framework/react/guide/server-routes). | |
| </Note> | |
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
docs/src/app/(docs)/getting-started/tanstack-start/page.mdx (1)
103-114: Consolidate the duplicated server-route notes.These two adjacent
<Note>blocks repeat the same guidance. Merging them will keep the section tighter and easier to maintain.✂️ Suggested doc cleanup
<Note> - TanStack Start server routes can live anywhere under `src/routes`, but this - guide uses `src/routes/api/uploadthing.ts` so the endpoint is served from - `/api/uploadthing`. -</Note> - -<Note> - TanStack Start server routes now live directly in your `src/routes` tree, so - `src/routes/api/uploadthing.ts` automatically serves `/api/uploadthing`. For - more information, please refer to the [TanStack Start server-routes - docs](https://tanstack.com/start/latest/docs/framework/react/guide/server-routes). + TanStack Start server routes live in `src/routes`, and this guide uses + `src/routes/api/uploadthing.ts`, which serves `/api/uploadthing` + automatically. For more information, refer to the [TanStack Start + server-routes docs](https://tanstack.com/start/latest/docs/framework/react/guide/server-routes). </Note>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/src/app/`(docs)/getting-started/tanstack-start/page.mdx around lines 103 - 114, Remove the duplicated adjacent <Note> blocks and merge their content into a single concise <Note> that states TanStack Start server routes live under src/routes and that src/routes/api/uploadthing.ts serves /api/uploadthing, and include the link to the TanStack Start server-routes docs; update the single <Note> so it contains the combined phrasing from both original blocks and delete the redundant one to avoid repetition.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/src/app/`(docs)/getting-started/tanstack-start/page.mdx:
- Around line 116-136: The docs example is using the wrong TanStack API pattern;
replace the createFileRoute + server.handlers pattern with the server route
pattern used in the example so it matches the examples/minimal-tanstack-start
code: import and use createServerFileRoute from "@tanstack/react-start/server",
keep the same createRouteHandler(handler) and uploadRouter, and expose Route via
createServerFileRoute("/api/uploadthing").methods({ GET: async ({ request }) =>
handler(request), POST: async ({ request }) => handler(request) }) so the
snippet uses createServerFileRoute, .methods(), Route, createRouteHandler, and
uploadRouter consistently with the example; alternatively add a short note above
the snippet explicitly stating the difference between createFileRoute
(client-side react-router) and createServerFileRoute (server-side react-start)
and when to use each.
---
Nitpick comments:
In `@docs/src/app/`(docs)/getting-started/tanstack-start/page.mdx:
- Around line 103-114: Remove the duplicated adjacent <Note> blocks and merge
their content into a single concise <Note> that states TanStack Start server
routes live under src/routes and that src/routes/api/uploadthing.ts serves
/api/uploadthing, and include the link to the TanStack Start server-routes docs;
update the single <Note> so it contains the combined phrasing from both original
blocks and delete the redundant one to avoid repetition.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2ab5c6a6-3219-4a89-b2e1-d99ad6f8efbe
📒 Files selected for processing (1)
docs/src/app/(docs)/getting-started/tanstack-start/page.mdx
| ```ts {{ title: "src/routes/api/uploadthing.ts" }} | ||
| import { createFileRoute } from "@tanstack/react-router"; | ||
|
|
||
| import { createRouteHandler } from "uploadthing/server"; | ||
|
|
||
| import { uploadRouter } from "../../server/uploadthing"; | ||
|
|
||
| const handlers = createRouteHandler({ router: uploadRouter }); | ||
|
|
||
| export const Route = createAPIFileRoute("/api/uploadthing")({ | ||
| GET: handlers, | ||
| POST: handlers, | ||
| const handler = createRouteHandler({ router: uploadRouter }); | ||
|
|
||
| export const Route = createFileRoute("/api/uploadthing")({ | ||
| server: { | ||
| handlers: { | ||
| GET: async ({ request }) => { | ||
| return handler(request); | ||
| }, | ||
| POST: async ({ request }) => { | ||
| return handler(request); | ||
| }, | ||
| }, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== TanStack Start route API usage in docs/examples =="
rg -n -C2 --type=mdx --type=ts --type=tsx \
'createServerFileRoute|createAPIFileRoute|createFileRoute\(|server:\s*\{|\.methods\(|export const ServerRoute|export const Route' \
docs examples
echo
echo "== TanStack package references in repository manifests =="
rg -n --glob '**/package.json' \
'"@tanstack/react-router"|"@tanstack/react-start"'Repository: pingdotgg/uploadthing
Length of output: 163
🏁 Script executed:
# Search for TanStack route patterns in docs and examples with corrected approach
find docs examples -type f \( -name "*.ts" -o -name "*.tsx" -o -name "*.mdx" \) | head -20Repository: pingdotgg/uploadthing
Length of output: 1024
🏁 Script executed:
# Look at the specific files mentioned in the review
echo "=== Docs file (page.mdx) ==="
find docs -name "*tanstack*" -o -name "*page.mdx" | grep -i tanstack
echo -e "\n=== Examples file ==="
find examples -path "*tanstack*" -name "*.ts"Repository: pingdotgg/uploadthing
Length of output: 504
🏁 Script executed:
# Check TanStack Start package version
rg '"@tanstack/react-start"' --glob='**/package.json' -A 1 -B 1Repository: pingdotgg/uploadthing
Length of output: 319
🏁 Script executed:
# Read the docs snippet mentioned in the review (lines 116-136)
sed -n '110,145p' docs/src/app/(docs)/getting-started/tanstack-start/page.mdx | cat -nRepository: pingdotgg/uploadthing
Length of output: 238
🏁 Script executed:
# Read the examples file that's being compared
cat -n examples/minimal-tanstack-start/src/routes/api.uploadthing.tsRepository: pingdotgg/uploadthing
Length of output: 514
🏁 Script executed:
# Read the docs file with proper escaping
cat -n "docs/src/app/(docs)/getting-started/tanstack-start/page.mdx" | sed -n '110,145p'Repository: pingdotgg/uploadthing
Length of output: 1283
🏁 Script executed:
# Search for other TanStack Start route patterns in the codebase
rg -n "createServerFileRoute|createFileRoute.*server.*handlers" examples/minimal-tanstack-start/Repository: pingdotgg/uploadthing
Length of output: 341
🏁 Script executed:
# Check if there's any documentation about the API differences or version requirements
find docs -name "*.mdx" -type f -exec grep -l "tanstack.*start\|react-start" {} \;Repository: pingdotgg/uploadthing
Length of output: 47
🏁 Script executed:
# Look for any migration or compatibility notes in the tanstack-start example
find examples/minimal-tanstack-start -name "*.md" -o -name "README*"Repository: pingdotgg/uploadthing
Length of output: 47
🏁 Script executed:
# Check all imports of createFileRoute and createServerFileRoute in the codebase
rg "import.*createFileRoute|import.*createServerFileRoute" --type ts --type tsx docs examplesRepository: pingdotgg/uploadthing
Length of output: 92
🏁 Script executed:
# Look for any other server route patterns in docs
rg "createServerFileRoute|ServerRoute" docs/ --type mdxRepository: pingdotgg/uploadthing
Length of output: 92
🏁 Script executed:
# Check if there's a difference between `@tanstack/react-router` and `@tanstack/react-start` packages
rg "@tanstack/react-router|@tanstack/react-start" --glob="**/package.json" --context 2Repository: pingdotgg/uploadthing
Length of output: 502
🏁 Script executed:
# Search without type filters for import patterns
rg "import.*createFileRoute|import.*createServerFileRoute" docs examplesRepository: pingdotgg/uploadthing
Length of output: 543
🏁 Script executed:
# Search for ServerRoute patterns
rg "ServerRoute" docs examplesRepository: pingdotgg/uploadthing
Length of output: 3079
🏁 Script executed:
# Check TanStack Start docs or example patterns in the example directory structure
ls -la "examples/minimal-tanstack-start/src/routes/" | head -20Repository: pingdotgg/uploadthing
Length of output: 363
Align TanStack Start server route patterns across docs and examples.
The docs snippet uses createFileRoute from "@tanstack/react-router" with a server: { handlers } config object, while examples/minimal-tanstack-start/src/routes/api.uploadthing.ts uses createServerFileRoute from "@tanstack/react-start/server" with a .methods() chaining API. These are incompatible patterns from different packages. Align both or add explicit documentation clarifying which pattern is correct and when each should be used.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/src/app/`(docs)/getting-started/tanstack-start/page.mdx around lines 116
- 136, The docs example is using the wrong TanStack API pattern; replace the
createFileRoute + server.handlers pattern with the server route pattern used in
the example so it matches the examples/minimal-tanstack-start code: import and
use createServerFileRoute from "@tanstack/react-start/server", keep the same
createRouteHandler(handler) and uploadRouter, and expose Route via
createServerFileRoute("/api/uploadthing").methods({ GET: async ({ request }) =>
handler(request), POST: async ({ request }) => handler(request) }) so the
snippet uses createServerFileRoute, .methods(), Route, createRouteHandler, and
uploadRouter consistently with the example; alternatively add a short note above
the snippet explicitly stating the difference between createFileRoute
(client-side react-router) and createServerFileRoute (server-side react-start)
and when to use each.
2 participants
Summary
createAPIFileRoute/app/api.tsguidance withcreateFileRoute(...){ server: { handlers } }src/..., refresh the RC note, and fix the homepage snippet export nameTesting
pnpm exec prettier --check "docs/src/app/(docs)/getting-started/tanstack-start/page.mdx"pnpm --filter @uploadthing/mime-types build && pnpm --filter @uploadthing/shared build && pnpm --filter uploadthing build && pnpm --filter @uploadthing/react buildpnpm --filter docs buildSummary by CodeRabbit