Add serverFetch hook

documentation/docs/04-hooks.md

@@ -87,3 +87,26 @@ export function getSession(request) {
 ```
 
 > `session` must be serializable, which means it must not contain things like functions or custom classes, just built-in JavaScript data types
+
+### serverFetch
+
+This function provides possibilities to replace `fetch` on the server-side for the external API requests. It's beneficial if you want to retrieve resources differently from what it is doing on the browser. For example, if you want to change URL or headers for server-side only.
+
+```ts
+type ServerFetch = (req: Request) => Promise<Response>;
+```
+
+```js
+/** @type {import('@sveltejs/kit').ServerFetch} */
+export async function serverFetch(request) {
+	let newRequest = request;
+	if (request.url.startsWith('https://my.site/api')) {
+		newRequest = new Request(
+			request.url.replace('https://my.site/api', 'http://localhost:9999/'),
+			request,
+		);
+	}
+
+	return fetch(newRequest);
+}
+```

packages/kit/src/core/build/index.js

@@ -363,7 +363,8 @@ async function build_server(
 			// named imports without triggering Rollup's missing import detection
 			const get_hooks = hooks => ({
 				getSession: hooks.getSession || (() => ({})),
-				handle: hooks.handle || (({ request, resolve }) => resolve(request))
+				handle: hooks.handle || (({ request, resolve }) => resolve(request)),
+				serverFetch: hooks.serverFetch || fetch
 			});
 
 			const module_lookup = {

packages/kit/src/core/dev/index.js

@@ -203,7 +203,8 @@ class Watcher extends EventEmitter {
 							},
 							hooks: {
 								getSession: hooks.getSession || (() => ({})),
-								handle: hooks.handle || (({ request, resolve }) => resolve(request))
+								handle: hooks.handle || (({ request, resolve }) => resolve(request)),
+								serverFetch: hooks.serverFetch || fetch
 							},
 							hydrate: this.config.kit.hydrate,
 							paths: this.config.kit.paths,

packages/kit/src/runtime/server/page/load_node.js

@@ -99,7 +99,8 @@ export async function load_node({
 
 				if (/^[a-zA-Z]+:/.test(url)) {
 					// external fetch
-					response = await fetch(url, /** @type {RequestInit} */ (opts));
+					const request = new Request(url, /** @type {RequestInit} */ (opts));
+					response = await options.hooks.serverFetch.call(null, request);
 				} else {
 					const [path, search] = url.split('?');
 

packages/kit/test/apps/basics/src/hooks.js

@@ -24,3 +24,16 @@ export async function handle({ request, resolve }) {
 		};
 	}
 }
+
+/** @type {import('@sveltejs/kit').ServerFetch} */
+export async function serverFetch(request) {
+	let newRequest = request;
+	if (request.url.endsWith('/server-fetch-request.json')) {
+		newRequest = new Request(
+			request.url.replace('/server-fetch-request.json', '/server-fetch-request2.json'),
+			request
+		);
+	}
+
+	return fetch(newRequest);
+}

packages/kit/test/apps/basics/src/routes/load/_tests.js

@@ -181,6 +181,44 @@ export default function (test, is_dev) {
 		server.close();
 	});
 
+	test('handles external api', '/load', async ({ base, page }) => {
+		const port = await ports.find(4000);
+
+		const files_names = ['/server-fetch-request.json', '/server-fetch-request2.json'];
+
+		let times_responded = 0;
+		let expect_answer = 42;
+
+		const server = http.createServer(async (req, res) => {
+			if (files_names.includes(req.url)) {
+				times_responded += 1;
+
+				res.writeHead(200, {
+					'Access-Control-Allow-Origin': '*',
+					'content-type': 'application/json'
+				});
+
+				if (req.url === files_names[0]) {
+					res.end(JSON.stringify({ answer: expect_answer }));
+				} else {
+					expect_answer = 43;
+					res.end(JSON.stringify({ answer: expect_answer }));
+				}
+			}
+		});
+
+		await new Promise((fulfil) => {
+			server.listen(port, () => fulfil());
+		});
+
+		await page.goto(`${base}/load/server-fetch-request?port=${port}`);
+
+		assert.equal(times_responded, 1);
+		assert.equal(await page.textContent('h1'), `the answer is ${expect_answer}`);
+
+		server.close();
+	});
+
 	test(
 		'makes credentialed fetches to endpoints by default',
 		'/load',

packages/kit/test/apps/basics/src/routes/load/index.svelte

@@ -24,3 +24,4 @@
 <a href="/load/fetch-credentialed">fetch credentialed</a>
 <a href="/load/large-response">large response</a>
 <a href="/load/raw-body">raw body</a>
+<a href="/load/server-fetch-request">server fetch request</a>

packages/kit/test/apps/basics/src/routes/load/server-fetch-request.svelte

@@ -0,0 +1,20 @@
+<script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
+	export async function load({ page, fetch }) {
+		const url = `http://localhost:${page.query.get('port')}/server-fetch-request.json`;
+
+		// @ts-ignore
+		const res = await fetch(url);
+		const { answer } = await res.json();
+		return {
+			props: { answer }
+		};
+	}
+</script>
+
+<script>
+	/** @type {number} */
+	export let answer;
+</script>
+
+<h1>the answer is {answer}</h1>

packages/kit/types/hooks.d.ts

@@ -31,3 +31,5 @@ export type Handle<Locals = Record<string, any>> = (input: {
 	request: ServerRequest<Locals>;
 	resolve: (request: ServerRequest<Locals>) => MaybePromise<ServerResponse>;
 }) => MaybePromise<ServerResponse>;
+
+export type ServerFetch = (req: Request) => Promise<Response>;

packages/kit/types/index.d.ts

@@ -11,5 +11,6 @@ export {
 	GetSession,
 	Handle,
 	ServerRequest as Request,
-	ServerResponse as Response
-} from './hooks';
+	ServerResponse as Response,
+	ServerFetch
+} from './hooks';

packages/kit/types/internal.d.ts

@@ -1,5 +1,5 @@
 import { Load } from './page';
-import { Incoming, GetSession, Handle, ServerResponse } from './hooks';
+import { Incoming, GetSession, Handle, ServerResponse, ServerFetch } from './hooks';
 import { RequestHandler } from './endpoint';
 
 type PageId = string;
@@ -111,6 +111,7 @@ export type SSRManifest = {
 export type Hooks = {
 	getSession?: GetSession;
 	handle?: Handle;
+	serverFetch?: ServerFetch;
 };
 
 export type SSRNode = {