fix(examples): API route calls failing on server

[cherniavskii]

Hey there,
I was exploring the start-basic example locally, and noticed the issue with API routes calls from the server.

The problem

Isomorphic calls to API routes fail on the server because of the relative URLs:

router/examples/react/start-basic/src/routes/users.tsx

Lines 4 to 6 in 4a93cff

	export const Route = createFileRoute('/users')({
	loader: async () => {
	const res = await fetch('/api/users')

Possible solutions

1. Make URLs absolute. I've used router.origin for this purpose:

import { getRouterInstance } from "@tanstack/react-start";
// ...
const router = await getRouterInstance();
const res = await fetch(new URL("/api/users/" + userId, router.origin));

2. Convert API routes to createServerFn() and call them via RPC

The solution

I took the 1st approach, because I assume that the purpose of the API routes is to showcase that it's possible to have an API route and use it in route loader.

I've also updated some snippets in the docs that were using relative URLs in isomorphic functions, and used absolute URLs (relative URLs won't work on the server anyway). I didn't want to bring route.origin solution there to not distract from the main purpose of those snippets.

Summary by CodeRabbit

• Documentation

  • Updated framework guides to clarify route loader execution patterns and demonstrate secure server-side data fetching practices.

• Bug Fixes

  • Updated starter project examples to construct API URLs using router origin instead of relative paths, improving reliability across React and Solid frameworks.

[coderabbitai]

📝 Walkthrough

Walkthrough

Documentation guides and example applications are updated to use router-provided origin for constructing absolute API URLs. Route loaders now call getRouterInstance() and build URLs via new URL() instead of fetching relative paths. Security documentation clarified to show server functions handling secrets rather than exposing them in loaders.

Changes

Router Origin Adoption for Absolute URL Construction

Layer / File(s)	Summary
Documentation updates for execution model and patterns docs/start/framework/react/guide/code-execution-patterns.md, docs/start/framework/react/guide/execution-model.md, docs/start/framework/solid/guide/code-execution-patterns.md, docs/start/framework/solid/guide/execution-model.md	Documentation guides updated to use absolute URLs in examples and clarify that route loaders run isomorphically. Code execution patterns guides now demonstrate calling server functions from loaders rather than exposing secrets directly. Both React and Solid execution-model guides updated to use example domain URLs.
React example loaders using router origin examples/react/start-basic/src/routes/users.$userId.tsx, examples/react/start-basic/src/routes/users.tsx, examples/react/start-basic-cloudflare/src/routes/users.$userId.tsx, examples/react/start-basic-cloudflare/src/routes/users.tsx	React Start examples across deployment targets (basic, cloudflare) updated to import getRouterInstance and construct API URLs using router.origin via new URL() instead of relative paths.
Solid example loaders using router origin examples/solid/start-basic/src/routes/users.$userId.tsx, examples/solid/start-basic/src/routes/users.tsx, examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx, examples/solid/start-basic-cloudflare/src/routes/users.tsx, examples/solid/start-basic-netlify/src/routes/users.$userId.tsx, examples/solid/start-basic-netlify/src/routes/users.tsx, examples/solid/start-basic-nitro/src/routes/users.$userId.tsx, examples/solid/start-basic-nitro/src/routes/users.tsx	Solid Start examples across deployment targets (basic, cloudflare, netlify, nitro) updated to import getRouterInstance and construct API URLs using router.origin via new URL() instead of relative paths.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

documentation, package: react-start, package: solid-start

Poem

🐰 The loaders hop with origin in paw,
No more relative paths breaking the law,
From cloudflare to nitro, they fetch with care,
Absolute URLs floating in air! 🌐

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(examples): API route calls failing on server' clearly and specifically describes the main change: fixing API route calls that fail on the server by updating examples to use absolute URLs instead of relative paths.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates Start example route loaders (Solid + React across multiple adapters) to build absolute API URLs using the router’s origin, and adjusts documentation examples to use fully-qualified URLs in fetch calls.

Changes:

• Updated various /users and /users/$userId loaders to call getRouterInstance() and use new URL(path, router.origin) for server/client-compatible fetching.
• Mirrored the same change across Solid Start adapters (basic/nitro/netlify/cloudflare) and React Start adapters (basic/cloudflare).
• Updated execution-model/code-execution docs to show fetch calls using an absolute https://api.example.com/... URL.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
examples/solid/start-basic/src/routes/users.tsx	Use router origin to build absolute /api/users URL in loader
examples/solid/start-basic/src/routes/users.$userId.tsx	Use router origin to build absolute /api/users/:id URL in loader
examples/solid/start-basic-nitro/src/routes/users.tsx	Same absolute URL fetch pattern for Nitro example
examples/solid/start-basic-nitro/src/routes/users.$userId.tsx	Same absolute URL fetch pattern for Nitro user detail route
examples/solid/start-basic-netlify/src/routes/users.tsx	Same absolute URL fetch pattern for Netlify example
examples/solid/start-basic-netlify/src/routes/users.$userId.tsx	Same absolute URL fetch pattern for Netlify user detail route
examples/solid/start-basic-cloudflare/src/routes/users.tsx	Same absolute URL fetch pattern for Cloudflare example
examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx	Same absolute URL fetch pattern for Cloudflare user detail route
examples/react/start-basic/src/routes/users.tsx	Use router origin to build absolute /api/users URL in loader
examples/react/start-basic/src/routes/users.$userId.tsx	Use router origin to build absolute /api/users/:id URL in loader
examples/react/start-basic-cloudflare/src/routes/users.tsx	Same absolute URL fetch pattern for React Cloudflare example
examples/react/start-basic-cloudflare/src/routes/users.$userId.tsx	Same absolute URL fetch pattern for React Cloudflare user detail route
docs/start/framework/solid/guide/execution-model.md	Replace relative /api/... fetch examples with absolute https://api.example.com/...
docs/start/framework/solid/guide/code-execution-patterns.md	Replace relative /api/... fetch examples with absolute https://api.example.com/...
docs/start/framework/react/guide/execution-model.md	Replace relative /api/... fetch examples with absolute https://api.example.com/...
docs/start/framework/react/guide/code-execution-patterns.md	Replace relative /api/... fetch examples with absolute https://api.example.com/...

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

🧹 Nitpick comments (1)

examples/solid/start-basic/src/routes/users.$userId.tsx (1)

17-17: ⚡ Quick win

Consider adding type assertion for consistency.

This file returns data without a type assertion, while the equivalent files in start-basic-cloudflare, start-basic-netlify, and start-basic-nitro all use return data as User. Adding the type assertion would improve consistency across examples and strengthen type safety.

✨ Suggested change for consistency

-      return data
+      return data as User

🤖 Prompt for 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.

In `@examples/solid/start-basic/src/routes/users`.$userId.tsx at line 17, The
route currently returns raw data without a type assertion; update the return in
users.$userId.tsx to return the payload with an explicit User assertion (e.g.,
return data as User) so it matches the other examples and strengthens type
safety—locate the loader/action/export that returns data in users.$userId.tsx
and add the "as User" assertion referencing the User type used elsewhere in the
project.

🤖 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.

Nitpick comments:
In `@examples/solid/start-basic/src/routes/users`.$userId.tsx:
- Line 17: The route currently returns raw data without a type assertion; update
the return in users.$userId.tsx to return the payload with an explicit User
assertion (e.g., return data as User) so it matches the other examples and
strengthens type safety—locate the loader/action/export that returns data in
users.$userId.tsx and add the "as User" assertion referencing the User type used
elsewhere in the project.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2a5e55ff-5363-4cff-bfbb-54b68662d861

📥 Commits

Reviewing files that changed from the base of the PR and between 4a93cff and 164ff37.

📒 Files selected for processing (16)

• docs/start/framework/react/guide/code-execution-patterns.md
• docs/start/framework/react/guide/execution-model.md
• docs/start/framework/solid/guide/code-execution-patterns.md
• docs/start/framework/solid/guide/execution-model.md
• examples/react/start-basic-cloudflare/src/routes/users.$userId.tsx
• examples/react/start-basic-cloudflare/src/routes/users.tsx
• examples/react/start-basic/src/routes/users.$userId.tsx
• examples/react/start-basic/src/routes/users.tsx
• examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx
• examples/solid/start-basic-cloudflare/src/routes/users.tsx
• examples/solid/start-basic-netlify/src/routes/users.$userId.tsx
• examples/solid/start-basic-netlify/src/routes/users.tsx
• examples/solid/start-basic-nitro/src/routes/users.$userId.tsx
• examples/solid/start-basic-nitro/src/routes/users.tsx
• examples/solid/start-basic/src/routes/users.$userId.tsx
• examples/solid/start-basic/src/routes/users.tsx