Fix(start-basic): Add deploy url to fix SSR fetch bug#7098
Fix(start-basic): Add deploy url to fix SSR fetch bug#7098g3org3 wants to merge 1 commit intoTanStack:mainfrom
Conversation
📝 WalkthroughWalkthroughThe PR updates API endpoint calls in two route loaders to use a configurable Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 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)
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 |
g3org3
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@examples/react/start-basic/src/routes/users`.$userId.tsx:
- Line 10: The URL is built by concatenating raw userId into DEPLOY_URL in
users.$userId.tsx (the line with const res = await fetch(DEPLOY_URL +
'/api/users/' + userId)), which breaks if userId contains reserved characters;
fix it by encoding userId with encodeURIComponent before appending to the path
(replace the direct userId concat with an encoded version or compute an
encodedUserId variable and use that) so the fetch target is always a valid URL.
In `@examples/react/start-basic/src/utils/users.tsx`:
- Line 7: Replace the hardcoded DEPLOY_URL constant so server-side loaders don't
always call http://localhost:3000; update the DEPLOY_URL export in users.tsx to
read a runtime environment variable (e.g., process.env.API_BASE_URL or a
framework-appropriate public env like import.meta.env.VITE_API_BASE_URL) with a
sensible development default of http://localhost:3000, and ensure users.tsx and
users.$userId.tsx reference that DEPLOY_URL; make the change so production
deployments use the env value while local dev falls back to localhost.
🪄 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: 8782aaa2-ba11-432c-a5d6-4a84cf4fe5a5
📒 Files selected for processing (3)
examples/react/start-basic/src/routes/users.$userId.tsxexamples/react/start-basic/src/routes/users.tsxexamples/react/start-basic/src/utils/users.tsx
| loader: async ({ params: { userId } }) => { | ||
| try { | ||
| const res = await fetch('/api/users/' + userId) | ||
| const res = await fetch(DEPLOY_URL + '/api/users/' + userId) |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n examples/react/start-basic/src/routes/users.\$userId.tsxRepository: TanStack/router
Length of output: 1612
Encode userId before building the request path.
Line 10 concatenates raw userId into the URL path. If it contains reserved characters like /, ?, or #, the request target will be malformed.
Proposed fix
- const res = await fetch(DEPLOY_URL + '/api/users/' + userId)
+ const res = await fetch(DEPLOY_URL + '/api/users/' + encodeURIComponent(userId))📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const res = await fetch(DEPLOY_URL + '/api/users/' + userId) | |
| const res = await fetch(DEPLOY_URL + '/api/users/' + encodeURIComponent(userId)) |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/react/start-basic/src/routes/users`.$userId.tsx at line 10, The URL
is built by concatenating raw userId into DEPLOY_URL in users.$userId.tsx (the
line with const res = await fetch(DEPLOY_URL + '/api/users/' + userId)), which
breaks if userId contains reserved characters; fix it by encoding userId with
encodeURIComponent before appending to the path (replace the direct userId
concat with an encoded version or compute an encodedUserId variable and use
that) so the fetch target is always a valid URL.
| email: string | ||
| } | ||
|
|
||
| export const DEPLOY_URL = 'http://localhost:3000' |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n examples/react/start-basic/src/utils/users.tsxRepository: TanStack/router
Length of output: 225
🏁 Script executed:
rg -n "import.*DEPLOY_URL" examples/react/start-basic/src/Repository: TanStack/router
Length of output: 254
🏁 Script executed:
rg -n "DEPLOY_URL" examples/react/start-basic/src/ -A 2 -B 2Repository: TanStack/router
Length of output: 2000
🏁 Script executed:
cat -n examples/react/start-basic/src/routes/users.tsx | head -50Repository: TanStack/router
Length of output: 1701
🏁 Script executed:
cat -n examples/react/start-basic/src/routes/users.\$userId.tsx | head -50Repository: TanStack/router
Length of output: 1612
🏁 Script executed:
fd "vite.config" examples/react/start-basic/ || fd "\.env" examples/react/start-basic/Repository: TanStack/router
Length of output: 100
🏁 Script executed:
cat -n examples/react/start-basic/vite.config.tsRepository: TanStack/router
Length of output: 670
🏁 Script executed:
fd "\.env" examples/react/start-basic/ -type fRepository: TanStack/router
Length of output: 229
🏁 Script executed:
cat -n examples/react/start-basic/.env 2>/dev/null || echo "No .env file found"Repository: TanStack/router
Length of output: 77
Don't hardcode localhost as the shared API base URL.
Line 7 forces all SSR loaders to fetch from http://localhost:3000, which breaks in production deployments. When this app is deployed, the server-side loaders in users.tsx and users.$userId.tsx will fail because they'll still target localhost instead of the actual deployment domain.
Use an environment variable with a sensible development default:
Proposed fix
export type User = {
id: number
name: string
email: string
}
-export const DEPLOY_URL = 'http://localhost:3000'
+const envDeployUrl = import.meta.env.VITE_DEPLOY_URL?.trim()
+
+export const DEPLOY_URL = (envDeployUrl || 'http://localhost:3000').replace(/\/+$/, '')📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const DEPLOY_URL = 'http://localhost:3000' | |
| const envDeployUrl = import.meta.env.VITE_DEPLOY_URL?.trim() | |
| export const DEPLOY_URL = (envDeployUrl || 'http://localhost:3000').replace(/\/+$/, '') |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/react/start-basic/src/utils/users.tsx` at line 7, Replace the
hardcoded DEPLOY_URL constant so server-side loaders don't always call
http://localhost:3000; update the DEPLOY_URL export in users.tsx to read a
runtime environment variable (e.g., process.env.API_BASE_URL or a
framework-appropriate public env like import.meta.env.VITE_API_BASE_URL) with a
sensible development default of http://localhost:3000, and ensure users.tsx and
users.$userId.tsx reference that DEPLOY_URL; make the change so production
deployments use the env value while local dev falls back to localhost.
1 participant
The Problem
I ran the start-basic example but when i refresh the page under /users or /users/9 is not working, it is failing at the fetch
It was there previously but it was removed I am not sure why.
8b5accb?w=1#diff-78bdb6a3013dc993b00e687f00f3d23bb60c5fd036c6ccc3d2a9b4aee5143690