Consider clarifying data fetching page

[Axelgustavschnurer]

📚 Subject area/topic

Data Fetching

📋 Page(s) affected (or suggested, for new content)

https://docs.astro.build/en/guides/data-fetching/

📋 Description of content that is out-of-date or incorrect

Data fetching page currently says:
"All Astro components have access to the global fetch() function in their component script to make HTTP requests to APIs using the full URL (e.g. https://example.com/api or Astro.url + "/api")."

This works as expected for external api's:

Code:

let response = await fetch(`https://full/api/path/data`)
let data: any = await response.json();

Build yields:

12:24:44 ▶ src/pages/page/index.astro
12:24:44   └─ /page/index.html (+761ms)
12:24:45 λ src/pages/data.json.ts
12:24:45   └─ /data.json (+775ms)

However this does not work when using prebuilt static endpoints or SSR endpoints generated at buildtime:

Code:

let response = await fetch(`${Astro.url.origin}/data.json`)
let data: any = await response.json();

OR:

let response = await fetch(`${Astro.url.origin}/api/data`)
let data: any = await response.json();

Build yields:

12:55:55 ▶ src/pages/page/index.astro
12:55:55   └─ /page/index.htmlfetch failed

As pages are not able to build when using neither statically built endpoints or server side endpoints i believe adding examples showing proper usage of or removing the mention of Astro.url + "/api" should be considered. Another issue is that Astro.url in itself is an object which cannot be concatenated with any string as is suggested in the documentation.

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

No response

[sarah11918]

Thank you for this comment @Axelgustavschnurer !

I know that @sasoria originally contributed that paragraph (almost a year ago!), so I will ask them if they would be willing to check to see whether anything has changed since that content was correct.

Additionally, I think an example using endpoints would be a very helpful addition! Would welcome a PR if someone would like to add one (and, that should help us correct the earlier paragraph).

[sasoria]

Thanks for the issue, I remember that we had some questions about this. I've taken a quick look at this and the correct way of doing the fetch would be:

await fetch(new URL("/my-api", Astro.url));

However this will only work for applications that have SSR enabled, so I'm fine with either removing it or writing a seperate sentence about it instead. Perhaps explaining that it's only for SSR and linking to the reference page for Astro.url?

[sarah11918]

Thanks for confirming Sergio!

So what about something maybe like like:

All Astro components have access to the global fetch() function in their component script to make HTTP requests to external APIs using the full URL (e.g. https://example.com/api). Additionally, endpoints built on demand with rendering mode server or hybrid can be reached using await fetch(new URL("/my-api", Astro.url));

???

[sasoria]

I like it. However it will only work on hybrid mode when both the page and the endpoint are rendered on the server. So maybe we can remove that part to keep it simple?

Here's an alternative way of writing it:

Additionally, for pages and endpoints that are rendered on the server, its also possible construct a url to the endpoint with Astro.url: new URL("/api", Astro.url));

[sasoria]

I reworded the suggestion above a little. Maybe this is easier to read.

Additionally, for pages and endpoints that are rendered on the server, its also possible construct a url to the endpoint using new URL("/api", Astro.url));

[sarah11918]

Love it!