From d0f6509f7f3b83b4fd3c8431cbef4c8dfb840469 Mon Sep 17 00:00:00 2001 From: Alexander Haas Date: Wed, 3 May 2023 14:39:36 +0200 Subject: [PATCH 1/5] docs(endpoints): added new example for returning buffers from endpoints When using the encoding: 'binary' providers like vercel send the buffer as plain text instead of a binary png. This can be prevented by using the Response object (just like in other frameworks like svelte) --- src/content/docs/en/core-concepts/endpoints.mdx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/content/docs/en/core-concepts/endpoints.mdx b/src/content/docs/en/core-concepts/endpoints.mdx index 1903443a1ae2b..d4525d0f0ebbd 100644 --- a/src/content/docs/en/core-concepts/endpoints.mdx +++ b/src/content/docs/en/core-concepts/endpoints.mdx @@ -40,6 +40,18 @@ export async function get({ params, request }) { } ``` +This method of returning a buffer as a response might not work for certain providers like vercel because the `Content-Type` header cannot be specified. For returning images prefer the following way (i.e. return a `Response`-Object): + +```ts title="src/pages/astro-logo.png.ts" +export async function get({ params, request }) { + const response = await fetch("https://docs.astro.build/assets/full-logo-light.png"); + const buffer = Buffer.from(await response.arrayBuffer()); + return new Response(buffer, { + headers: { "Content-Type": "image/png" }, + }); +} +``` + You can also type your endpoint functions using the `APIRoute` type: ```ts From 59e6aaa9f36b3cedd6b98761b1189dfc3c5fea78 Mon Sep 17 00:00:00 2001 From: Alexander Haas Date: Sat, 3 Jun 2023 22:11:01 +0200 Subject: [PATCH 2/5] Revert "docs(endpoints): added new example for returning buffers from endpoints" This reverts commit d0f6509f7f3b83b4fd3c8431cbef4c8dfb840469. --- src/content/docs/en/core-concepts/endpoints.mdx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/content/docs/en/core-concepts/endpoints.mdx b/src/content/docs/en/core-concepts/endpoints.mdx index d4525d0f0ebbd..1903443a1ae2b 100644 --- a/src/content/docs/en/core-concepts/endpoints.mdx +++ b/src/content/docs/en/core-concepts/endpoints.mdx @@ -40,18 +40,6 @@ export async function get({ params, request }) { } ``` -This method of returning a buffer as a response might not work for certain providers like vercel because the `Content-Type` header cannot be specified. For returning images prefer the following way (i.e. return a `Response`-Object): - -```ts title="src/pages/astro-logo.png.ts" -export async function get({ params, request }) { - const response = await fetch("https://docs.astro.build/assets/full-logo-light.png"); - const buffer = Buffer.from(await response.arrayBuffer()); - return new Response(buffer, { - headers: { "Content-Type": "image/png" }, - }); -} -``` - You can also type your endpoint functions using the `APIRoute` type: ```ts From 3d6fa27c55fece0ebaf3be8324ee05f9cfa3fa05 Mon Sep 17 00:00:00 2001 From: Alexander Haas Date: Sat, 3 Jun 2023 22:23:13 +0200 Subject: [PATCH 3/5] docs: moved binary image example to ssr section --- .../docs/en/core-concepts/endpoints.mdx | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/core-concepts/endpoints.mdx b/src/content/docs/en/core-concepts/endpoints.mdx index 1903443a1ae2b..98eff5b2c5a4b 100644 --- a/src/content/docs/en/core-concepts/endpoints.mdx +++ b/src/content/docs/en/core-concepts/endpoints.mdx @@ -40,6 +40,18 @@ export async function get({ params, request }) { } ``` +This method of returning a buffer as a response might not work for certain providers like vercel because the `Content-Type` header cannot be specified. For returning images prefer the following way (i.e. return a `Response`-Object): + +```ts title="src/pages/astro-logo.png.ts" +export async function get({ params, request }) { + const response = await fetch("https://docs.astro.build/assets/full-logo-light.png"); + const buffer = Buffer.from(await response.arrayBuffer()); + return new Response(buffer, { + headers: { "Content-Type": "image/png" }, + }); +} +``` + You can also type your endpoint functions using the `APIRoute` type: ```ts @@ -49,7 +61,6 @@ export const get: APIRoute = async function get ({params, request}) { ... ``` - ### `params` and Dynamic routing Endpoints support the same [dynamic routing](/en/core-concepts/routing/#dynamic-routes) features that pages do. Name your file with a bracketed parameter name and export a [`getStaticPaths()` function](/en/reference/api-reference/#getstaticpaths). Then, you can access the parameter using the `params` property passed to the endpoint function: @@ -127,8 +138,20 @@ export async function get({ params }) { }); } ``` + This will respond to any request that matches the dynamic route. For example, if we navigate to `/helmet.json`, `params.id` will be set to `helmet`. If `helmet` exists in the mock product database, the endpoint will use create a `Response` object to respond with JSON and return a successful [HTTP status code](https://developer.mozilla.org/en-US/docs/Web/API/Response/status). If not, it will use a `Response` object to respond with a `404`. +In **SSR** mode certain providers require the `Content-Type` header to return an image. In this case, use a `Response` object to specify a `headers` property like in the example above. + +```ts title="src/pages/astro-logo.png.ts" +export async function get({ params, request }) { + const response = await fetch("https://docs.astro.build/assets/full-logo-light.png"); + const buffer = Buffer.from(await response.arrayBuffer()); + return new Response(buffer, { + headers: { "Content-Type": "image/png" }, + }); +} +``` ### HTTP methods In addition to the `get` function, you can export a function with the name of any [HTTP method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). When a request comes in, Astro will check the method and call the corresponding function. From ede51e7f47cc40734532d0ff0b2dd0c717480a81 Mon Sep 17 00:00:00 2001 From: Alexander Haas Date: Sat, 3 Jun 2023 22:27:25 +0200 Subject: [PATCH 4/5] docs: removed previous changes --- src/content/docs/en/core-concepts/endpoints.mdx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/content/docs/en/core-concepts/endpoints.mdx b/src/content/docs/en/core-concepts/endpoints.mdx index 98eff5b2c5a4b..9bb6e3b4a363b 100644 --- a/src/content/docs/en/core-concepts/endpoints.mdx +++ b/src/content/docs/en/core-concepts/endpoints.mdx @@ -40,18 +40,6 @@ export async function get({ params, request }) { } ``` -This method of returning a buffer as a response might not work for certain providers like vercel because the `Content-Type` header cannot be specified. For returning images prefer the following way (i.e. return a `Response`-Object): - -```ts title="src/pages/astro-logo.png.ts" -export async function get({ params, request }) { - const response = await fetch("https://docs.astro.build/assets/full-logo-light.png"); - const buffer = Buffer.from(await response.arrayBuffer()); - return new Response(buffer, { - headers: { "Content-Type": "image/png" }, - }); -} -``` - You can also type your endpoint functions using the `APIRoute` type: ```ts From acce0ba6ea42b3f7cbef6a7e98207ddd0c552cd7 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Sun, 4 Jun 2023 11:18:47 -0300 Subject: [PATCH 5/5] slight tweaks for situational context --- src/content/docs/en/core-concepts/endpoints.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/core-concepts/endpoints.mdx b/src/content/docs/en/core-concepts/endpoints.mdx index 9bb6e3b4a363b..cb2c3f8f1207f 100644 --- a/src/content/docs/en/core-concepts/endpoints.mdx +++ b/src/content/docs/en/core-concepts/endpoints.mdx @@ -129,7 +129,7 @@ export async function get({ params }) { This will respond to any request that matches the dynamic route. For example, if we navigate to `/helmet.json`, `params.id` will be set to `helmet`. If `helmet` exists in the mock product database, the endpoint will use create a `Response` object to respond with JSON and return a successful [HTTP status code](https://developer.mozilla.org/en-US/docs/Web/API/Response/status). If not, it will use a `Response` object to respond with a `404`. -In **SSR** mode certain providers require the `Content-Type` header to return an image. In this case, use a `Response` object to specify a `headers` property like in the example above. +In SSR mode, certain providers require the `Content-Type` header to return an image. In this case, use a `Response` object to specify a `headers` property. For example, to produce a binary `.png` image: ```ts title="src/pages/astro-logo.png.ts" export async function get({ params, request }) {