From ce5a4bfa033cc4785b3ded36efa358b41482f07d Mon Sep 17 00:00:00 2001 From: Andrew Date: Sun, 7 Jun 2026 13:53:08 +0200 Subject: [PATCH 1/2] fix api routes calls failing on the server --- .../react/start-basic-cloudflare/src/routes/users.$userId.tsx | 4 +++- examples/react/start-basic-cloudflare/src/routes/users.tsx | 4 +++- examples/react/start-basic/src/routes/users.$userId.tsx | 4 +++- examples/react/start-basic/src/routes/users.tsx | 4 +++- .../solid/start-basic-cloudflare/src/routes/users.$userId.tsx | 4 +++- examples/solid/start-basic-cloudflare/src/routes/users.tsx | 4 +++- .../solid/start-basic-netlify/src/routes/users.$userId.tsx | 4 +++- examples/solid/start-basic-netlify/src/routes/users.tsx | 4 +++- examples/solid/start-basic-nitro/src/routes/users.$userId.tsx | 4 +++- examples/solid/start-basic-nitro/src/routes/users.tsx | 4 +++- examples/solid/start-basic/src/routes/users.$userId.tsx | 4 +++- examples/solid/start-basic/src/routes/users.tsx | 4 +++- 12 files changed, 36 insertions(+), 12 deletions(-) diff --git a/examples/react/start-basic-cloudflare/src/routes/users.$userId.tsx b/examples/react/start-basic-cloudflare/src/routes/users.$userId.tsx index fe22eb86c3..685f4ebb91 100644 --- a/examples/react/start-basic-cloudflare/src/routes/users.$userId.tsx +++ b/examples/react/start-basic-cloudflare/src/routes/users.$userId.tsx @@ -1,4 +1,5 @@ import { createFileRoute } from '@tanstack/react-router' +import { getRouterInstance } from '@tanstack/react-start' import { NotFound } from '../components/NotFound' import { UserErrorComponent } from '../components/UserError' import type { User } from '~/utils/users' @@ -6,7 +7,8 @@ import type { User } from '~/utils/users' export const Route = createFileRoute('/users/$userId')({ loader: async ({ params: { userId } }) => { try { - const res = await fetch('/api/users/' + userId) + const router = await getRouterInstance() + const res = await fetch(new URL('/api/users/' + userId, router.origin)) if (!res.ok) { throw new Error('Unexpected status code') } diff --git a/examples/react/start-basic-cloudflare/src/routes/users.tsx b/examples/react/start-basic-cloudflare/src/routes/users.tsx index 55b22b6e40..1fb555fd5e 100644 --- a/examples/react/start-basic-cloudflare/src/routes/users.tsx +++ b/examples/react/start-basic-cloudflare/src/routes/users.tsx @@ -1,9 +1,11 @@ import { Link, Outlet, createFileRoute } from '@tanstack/react-router' +import { getRouterInstance } from '@tanstack/react-start' import type { User } from '~/utils/users' export const Route = createFileRoute('/users')({ loader: async () => { - const res = await fetch('/api/users') + const router = await getRouterInstance() + const res = await fetch(new URL('/api/users', router.origin)) if (!res.ok) { throw new Error('Unexpected status code') diff --git a/examples/react/start-basic/src/routes/users.$userId.tsx b/examples/react/start-basic/src/routes/users.$userId.tsx index 4e4d470075..7543e8d33d 100644 --- a/examples/react/start-basic/src/routes/users.$userId.tsx +++ b/examples/react/start-basic/src/routes/users.$userId.tsx @@ -1,4 +1,5 @@ import { createFileRoute } from '@tanstack/react-router' +import { getRouterInstance } from '@tanstack/react-start' import { NotFound } from '../components/NotFound' import { UserErrorComponent } from '../components/UserError' import type { User } from '../utils/users' @@ -6,7 +7,8 @@ import type { User } from '../utils/users' export const Route = createFileRoute('/users/$userId')({ loader: async ({ params: { userId } }) => { try { - const res = await fetch('/api/users/' + userId) + const router = await getRouterInstance() + const res = await fetch(new URL('/api/users/' + userId, router.origin)) if (!res.ok) { throw new Error('Unexpected status code') } diff --git a/examples/react/start-basic/src/routes/users.tsx b/examples/react/start-basic/src/routes/users.tsx index 64ca3ce156..734e3929b4 100644 --- a/examples/react/start-basic/src/routes/users.tsx +++ b/examples/react/start-basic/src/routes/users.tsx @@ -1,9 +1,11 @@ import { Link, Outlet, createFileRoute } from '@tanstack/react-router' +import { getRouterInstance } from '@tanstack/react-start' import type { User } from '../utils/users' export const Route = createFileRoute('/users')({ loader: async () => { - const res = await fetch('/api/users') + const router = await getRouterInstance() + const res = await fetch(new URL('/api/users', router.origin)) if (!res.ok) { throw new Error('Unexpected status code') diff --git a/examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx b/examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx index d2aeeb448c..48123fb52d 100644 --- a/examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx +++ b/examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx @@ -1,4 +1,5 @@ import { createFileRoute } from '@tanstack/solid-router' +import { getRouterInstance } from '@tanstack/solid-start' import { NotFound } from '../components/NotFound' import { UserErrorComponent } from '../components/UserError' import type { User } from '../utils/users' @@ -6,7 +7,8 @@ import type { User } from '../utils/users' export const Route = createFileRoute('/users/$userId')({ loader: async ({ params: { userId } }) => { try { - const res = await fetch('/api/users/' + userId) + const router = await getRouterInstance() + const res = await fetch(new URL('/api/users/' + userId, router.origin)) if (!res.ok) { throw new Error('Unexpected status code') } diff --git a/examples/solid/start-basic-cloudflare/src/routes/users.tsx b/examples/solid/start-basic-cloudflare/src/routes/users.tsx index 00e075256d..08ddec9ecb 100644 --- a/examples/solid/start-basic-cloudflare/src/routes/users.tsx +++ b/examples/solid/start-basic-cloudflare/src/routes/users.tsx @@ -1,9 +1,11 @@ import { Link, Outlet, createFileRoute } from '@tanstack/solid-router' +import { getRouterInstance } from '@tanstack/solid-start' import type { User } from '../utils/users' export const Route = createFileRoute('/users')({ loader: async () => { - const res = await fetch('/api/users') + const router = await getRouterInstance() + const res = await fetch(new URL('/api/users', router.origin)) if (!res.ok) { throw new Error('Unexpected status code') diff --git a/examples/solid/start-basic-netlify/src/routes/users.$userId.tsx b/examples/solid/start-basic-netlify/src/routes/users.$userId.tsx index d2aeeb448c..48123fb52d 100644 --- a/examples/solid/start-basic-netlify/src/routes/users.$userId.tsx +++ b/examples/solid/start-basic-netlify/src/routes/users.$userId.tsx @@ -1,4 +1,5 @@ import { createFileRoute } from '@tanstack/solid-router' +import { getRouterInstance } from '@tanstack/solid-start' import { NotFound } from '../components/NotFound' import { UserErrorComponent } from '../components/UserError' import type { User } from '../utils/users' @@ -6,7 +7,8 @@ import type { User } from '../utils/users' export const Route = createFileRoute('/users/$userId')({ loader: async ({ params: { userId } }) => { try { - const res = await fetch('/api/users/' + userId) + const router = await getRouterInstance() + const res = await fetch(new URL('/api/users/' + userId, router.origin)) if (!res.ok) { throw new Error('Unexpected status code') } diff --git a/examples/solid/start-basic-netlify/src/routes/users.tsx b/examples/solid/start-basic-netlify/src/routes/users.tsx index 00e075256d..08ddec9ecb 100644 --- a/examples/solid/start-basic-netlify/src/routes/users.tsx +++ b/examples/solid/start-basic-netlify/src/routes/users.tsx @@ -1,9 +1,11 @@ import { Link, Outlet, createFileRoute } from '@tanstack/solid-router' +import { getRouterInstance } from '@tanstack/solid-start' import type { User } from '../utils/users' export const Route = createFileRoute('/users')({ loader: async () => { - const res = await fetch('/api/users') + const router = await getRouterInstance() + const res = await fetch(new URL('/api/users', router.origin)) if (!res.ok) { throw new Error('Unexpected status code') diff --git a/examples/solid/start-basic-nitro/src/routes/users.$userId.tsx b/examples/solid/start-basic-nitro/src/routes/users.$userId.tsx index d2aeeb448c..48123fb52d 100644 --- a/examples/solid/start-basic-nitro/src/routes/users.$userId.tsx +++ b/examples/solid/start-basic-nitro/src/routes/users.$userId.tsx @@ -1,4 +1,5 @@ import { createFileRoute } from '@tanstack/solid-router' +import { getRouterInstance } from '@tanstack/solid-start' import { NotFound } from '../components/NotFound' import { UserErrorComponent } from '../components/UserError' import type { User } from '../utils/users' @@ -6,7 +7,8 @@ import type { User } from '../utils/users' export const Route = createFileRoute('/users/$userId')({ loader: async ({ params: { userId } }) => { try { - const res = await fetch('/api/users/' + userId) + const router = await getRouterInstance() + const res = await fetch(new URL('/api/users/' + userId, router.origin)) if (!res.ok) { throw new Error('Unexpected status code') } diff --git a/examples/solid/start-basic-nitro/src/routes/users.tsx b/examples/solid/start-basic-nitro/src/routes/users.tsx index 00e075256d..08ddec9ecb 100644 --- a/examples/solid/start-basic-nitro/src/routes/users.tsx +++ b/examples/solid/start-basic-nitro/src/routes/users.tsx @@ -1,9 +1,11 @@ import { Link, Outlet, createFileRoute } from '@tanstack/solid-router' +import { getRouterInstance } from '@tanstack/solid-start' import type { User } from '../utils/users' export const Route = createFileRoute('/users')({ loader: async () => { - const res = await fetch('/api/users') + const router = await getRouterInstance() + const res = await fetch(new URL('/api/users', router.origin)) if (!res.ok) { throw new Error('Unexpected status code') diff --git a/examples/solid/start-basic/src/routes/users.$userId.tsx b/examples/solid/start-basic/src/routes/users.$userId.tsx index 489abd1d3d..4a1473e433 100644 --- a/examples/solid/start-basic/src/routes/users.$userId.tsx +++ b/examples/solid/start-basic/src/routes/users.$userId.tsx @@ -1,11 +1,13 @@ import { createFileRoute } from '@tanstack/solid-router' +import { getRouterInstance } from '@tanstack/solid-start' import { NotFound } from '../components/NotFound' import { UserErrorComponent } from '../components/UserError' export const Route = createFileRoute('/users/$userId')({ loader: async ({ params: { userId } }) => { try { - const res = await fetch('/api/users/' + userId) + const router = await getRouterInstance() + const res = await fetch(new URL('/api/users/' + userId, router.origin)) if (!res.ok) { throw new Error('Unexpected status code') } diff --git a/examples/solid/start-basic/src/routes/users.tsx b/examples/solid/start-basic/src/routes/users.tsx index 07439d1928..72a1965005 100644 --- a/examples/solid/start-basic/src/routes/users.tsx +++ b/examples/solid/start-basic/src/routes/users.tsx @@ -1,9 +1,11 @@ import { Link, Outlet, createFileRoute } from '@tanstack/solid-router' +import { getRouterInstance } from '@tanstack/solid-start' import type { User } from '../utils/users' export const Route = createFileRoute('/users')({ loader: async () => { - const res = await fetch('/api/users') + const router = await getRouterInstance() + const res = await fetch(new URL('/api/users', router.origin)) if (!res.ok) { throw new Error('Unexpected status code') From 164ff375ef63deb140f23a1c1e4975abbdbc1d31 Mon Sep 17 00:00:00 2001 From: Andrew Date: Sun, 7 Jun 2026 13:58:18 +0200 Subject: [PATCH 2/2] avoid relative URLs in isomorphic docs examples --- docs/start/framework/react/guide/code-execution-patterns.md | 4 ++-- docs/start/framework/react/guide/execution-model.md | 6 +++--- docs/start/framework/solid/guide/code-execution-patterns.md | 4 ++-- docs/start/framework/solid/guide/execution-model.md | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/start/framework/react/guide/code-execution-patterns.md b/docs/start/framework/react/guide/code-execution-patterns.md index c1afda4f41..17a73d9baa 100644 --- a/docs/start/framework/react/guide/code-execution-patterns.md +++ b/docs/start/framework/react/guide/code-execution-patterns.md @@ -95,14 +95,14 @@ export const Route = createFileRoute('/users')({ loader: () => { // This runs on BOTH server and client! const secret = process.env.SECRET // Exposed to client - return fetch(`/api/users?key=${secret}`) + return fetch(`https://api.example.com/api/users?key=${secret}`) }, }) // ✅ Use server function for server-only operations const getUsersSecurely = createServerFn().handler(() => { const secret = process.env.SECRET // Server-only - return fetch(`/api/users?key=${secret}`) + return fetch(`https://api.example.com/api/users?key=${secret}`) }) export const Route = createFileRoute('/users')({ diff --git a/docs/start/framework/react/guide/execution-model.md b/docs/start/framework/react/guide/execution-model.md index 955feda548..2c50dc890f 100644 --- a/docs/start/framework/react/guide/execution-model.md +++ b/docs/start/framework/react/guide/execution-model.md @@ -22,7 +22,7 @@ function formatPrice(price: number) { export const Route = createFileRoute('/products')({ loader: async () => { // This runs on server during SSR AND on client during navigation - const response = await fetch('/api/products') + const response = await fetch('https://api.example.com/api/products') return response.json() }, }) @@ -223,14 +223,14 @@ export const Route = createFileRoute('/users')({ loader: () => { // This runs on BOTH server and client! const secret = process.env.SECRET // Exposed to client - return fetch(`/api/users?key=${secret}`) + return fetch(`https://api.example.com/api/users?key=${secret}`) }, }) // ✅ Use server function for server-only operations const getUsersSecurely = createServerFn().handler(() => { const secret = process.env.SECRET // Server-only - return fetch(`/api/users?key=${secret}`) + return fetch(`https://api.example.com/api/users?key=${secret}`) }) export const Route = createFileRoute('/users')({ diff --git a/docs/start/framework/solid/guide/code-execution-patterns.md b/docs/start/framework/solid/guide/code-execution-patterns.md index 93472d5317..149997b2bf 100644 --- a/docs/start/framework/solid/guide/code-execution-patterns.md +++ b/docs/start/framework/solid/guide/code-execution-patterns.md @@ -95,14 +95,14 @@ export const Route = createFileRoute('/users')({ loader: () => { // This runs on BOTH server and client! const secret = process.env.SECRET // Exposed to client - return fetch(`/api/users?key=${secret}`) + return fetch(`https://api.example.com/api/users?key=${secret}`) }, }) // ✅ Use server function for server-only operations const getUsersSecurely = createServerFn().handler(() => { const secret = process.env.SECRET // Server-only - return fetch(`/api/users?key=${secret}`) + return fetch(`https://api.example.com/api/users?key=${secret}`) }) export const Route = createFileRoute('/users')({ diff --git a/docs/start/framework/solid/guide/execution-model.md b/docs/start/framework/solid/guide/execution-model.md index f6076667b7..24840fc802 100644 --- a/docs/start/framework/solid/guide/execution-model.md +++ b/docs/start/framework/solid/guide/execution-model.md @@ -22,7 +22,7 @@ function formatPrice(price: number) { export const Route = createFileRoute('/products')({ loader: async () => { // This runs on server during SSR AND on client during navigation - const response = await fetch('/api/products') + const response = await fetch('https://api.example.com/api/products') return response.json() }, }) @@ -211,14 +211,14 @@ export const Route = createFileRoute('/users')({ loader: () => { // This runs on BOTH server and client! const secret = process.env.SECRET // Exposed to client - return fetch(`/api/users?key=${secret}`) + return fetch(`https://api.example.com/api/users?key=${secret}`) }, }) // ✅ Use server function for server-only operations const getUsersSecurely = createServerFn().handler(() => { const secret = process.env.SECRET // Server-only - return fetch(`/api/users?key=${secret}`) + return fetch(`https://api.example.com/api/users?key=${secret}`) }) export const Route = createFileRoute('/users')({