From e7911574389a2aacf8edc1a876f1abab3929c836 Mon Sep 17 00:00:00 2001 From: GrygrFlzr Date: Tue, 27 Apr 2021 19:19:37 +0700 Subject: [PATCH 1/2] docs: global fetch --- documentation/docs/01-routing.md | 9 ++++++++- documentation/migrating/05-endpoints.md | 2 ++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/documentation/docs/01-routing.md b/documentation/docs/01-routing.md index 1d15746c75b8..58981e02afa5 100644 --- a/documentation/docs/01-routing.md +++ b/documentation/docs/01-routing.md @@ -43,7 +43,9 @@ Dynamic parameters are encoded using `[brackets]`. For example, a blog post migh ### Endpoints -Endpoints are modules written in `.js` (or `.ts`) files that export functions corresponding to HTTP methods. For example, our hypothetical blog page, `/blog/cool-article`, might request data from `/blog/cool-article.json`, which could be represented by a `src/routes/blog/[slug].json.js` endpoint: +Endpoints are modules written in `.js` (or `.ts`) files that export functions corresponding to HTTP methods. All endpoints have access to `fetch` globally without needing to import an external dependency. + +For example, our hypothetical blog page, `/blog/cool-article`, might request data from `/blog/cool-article.json`, which could be represented by a `src/routes/blog/[slug].json.js` endpoint: ```ts type Request = { @@ -80,11 +82,16 @@ export async function get({ params }) { // is called [slug].json.js const { slug } = params; + // global fetch without imports + const response = await fetch('/my-api'); + const apiData = await response.json(); + const article = await db.get(slug); if (article) { return { body: { + apiData, article } }; diff --git a/documentation/migrating/05-endpoints.md b/documentation/migrating/05-endpoints.md index f09439c4bd5f..4b9913422193 100644 --- a/documentation/migrating/05-endpoints.md +++ b/documentation/migrating/05-endpoints.md @@ -5,3 +5,5 @@ title: Endpoints In Sapper, 'server routes' — now referred to as [endpoints](/docs#routing-endpoints) — received the `req` and `res` objects exposed by Node's `http` module (or the augmented versions provided by frameworks like Polka and Express). SvelteKit is designed to be agnostic as to where the app is running — it could be running on a Node server, but could equally be running on a serverless platform or in a Cloudflare Worker. For that reason, you no longer interact directly with `req` and `res`. Your endpoints will need to be updated to match the new signature. + +To support this environment-agnostic behavior, `fetch` is now available in the global context, so you don't need to import `node-fetch`, `cross-fetch`, or similar server-side fetch implementations in order to use it. From 36e9eda1fb256694b2cdd7719398bd20e6f72854 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 27 Apr 2021 19:09:18 -0400 Subject: [PATCH 2/2] put fetch stuff in an aside --- documentation/docs/01-routing.md | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/documentation/docs/01-routing.md b/documentation/docs/01-routing.md index 58981e02afa5..f59fa05e5734 100644 --- a/documentation/docs/01-routing.md +++ b/documentation/docs/01-routing.md @@ -43,9 +43,7 @@ Dynamic parameters are encoded using `[brackets]`. For example, a blog post migh ### Endpoints -Endpoints are modules written in `.js` (or `.ts`) files that export functions corresponding to HTTP methods. All endpoints have access to `fetch` globally without needing to import an external dependency. - -For example, our hypothetical blog page, `/blog/cool-article`, might request data from `/blog/cool-article.json`, which could be represented by a `src/routes/blog/[slug].json.js` endpoint: +Endpoints are modules written in `.js` (or `.ts`) files that export functions corresponding to HTTP methods. For example, our hypothetical blog page, `/blog/cool-article`, might request data from `/blog/cool-article.json`, which could be represented by a `src/routes/blog/[slug].json.js` endpoint: ```ts type Request = { @@ -82,16 +80,11 @@ export async function get({ params }) { // is called [slug].json.js const { slug } = params; - // global fetch without imports - const response = await fetch('/my-api'); - const apiData = await response.json(); - const article = await db.get(slug); if (article) { return { body: { - apiData, article } }; @@ -99,7 +92,7 @@ export async function get({ params }) { } ``` -> Returning nothing is equivalent to an explicit 404 response. +> All server-side code, including endpoints, has access to `fetch` in case you need to request data from external APIs. The job of this function is to return a `{ status, headers, body }` object representing the response, where `status` is an [HTTP status code](https://httpstatusdogs.com): @@ -108,10 +101,12 @@ The job of this function is to return a `{ status, headers, body }` object repre - `4xx` — client error - `5xx` — server error -> For successful responses, SvelteKit will generate 304s automatically +> For successful responses, SvelteKit will generate 304s automatically. If the returned `body` is an object, and no `content-type` header is returned, it will automatically be turned into a JSON response. (Don't worry about `$lib`, we'll get to that [later](#modules-lib).) +> Returning nothing is equivalent to an explicit 404 response. + For endpoints that handle other HTTP methods, like POST, export the corresponding function: ```js