summaryrefslogtreecommitdiff
path: root/docs/src/pages/guides/data-fetching.md
diff options
context:
space:
mode:
authorGravatar Caleb Jasik <calebjasik@jasik.xyz> 2022-01-03 13:59:34 -0600
committerGravatar GitHub <noreply@github.com> 2022-01-03 11:59:34 -0800
commitf26eb7b74558a06ed96e7c94fd9844eaf2508fb4 (patch)
tree750ea3ba771df1669aa50782b7882ed6bee0132b /docs/src/pages/guides/data-fetching.md
parentf9b813aa86a199c8c00a4e1fe306ff6db24f1b31 (diff)
downloadastro-f26eb7b74558a06ed96e7c94fd9844eaf2508fb4.tar.gz
astro-f26eb7b74558a06ed96e7c94fd9844eaf2508fb4.tar.zst
astro-f26eb7b74558a06ed96e7c94fd9844eaf2508fb4.zip
Docs/move-english-docs-to-"en"-folder (#2268)
* Move english pages under `/en` and fix broken links hopefully * Add meta refresh tags for `/` to `/en/` url moves + make `/index.astro` work without js * update languageselect for new en format Co-authored-by: Fred K. Schott <fkschott@gmail.com>
Diffstat (limited to 'docs/src/pages/guides/data-fetching.md')
-rw-r--r--docs/src/pages/guides/data-fetching.md56
1 files changed, 0 insertions, 56 deletions
diff --git a/docs/src/pages/guides/data-fetching.md b/docs/src/pages/guides/data-fetching.md
deleted file mode 100644
index a0481f059..000000000
--- a/docs/src/pages/guides/data-fetching.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Data Fetching
-description: Learn how to fetch remote data with Astro using the fetch API.
----
-
-Astro components and pages can fetch remote data to help generate your pages. Astro provides two different tools to pages to help you do this: **fetch()** and **top-level await.**
-
-## `fetch()`
-
-Astro pages have access to the global `fetch()` function in their setup script. `fetch()` is a native JavaScript API ([MDN<span class="sr-only">- fetch</span>](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)) that lets you make HTTP requests for things like APIs and resources.
-
-Even though Astro component scripts run inside of Node.js (and not in the browser) Astro provides this native API so that you can fetch data at page build time.
-
-```astro
----
-// Movies.astro
-const response = await fetch('https://example.com/movies.json');
-const data = await response.json();
-// Remember: Astro component scripts log to the CLI
-console.log(data);
----
-<!-- Output the result to the page -->
-<div>{JSON.stringify(data)}</div>
-```
-
-## Top-level await
-
-`await` is another native JavaScript feature that lets you await the response of some asynchronous promise ([MDN<span class="sr-only">- await</span>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)). Astro supports `await` in the top-level of your component script.
-
-**Important:** These are not yet available inside of non-page Astro components. Instead, do all of your data loading inside of your pages, and then pass them to your components as props.
-
-## Using `fetch()` outside of Astro Components
-
-If you want to use `fetch()` in a non-astro component, it is also globally available:
-
-```tsx
-// Movies.tsx
-import type { FunctionalComponent } from 'preact';
-import { h } from 'preact';
-
-const data = fetch('https://example.com/movies.json').then((response) =>
- response.json()
-);
-
-// Components that are build-time rendered also log to the CLI.
-// If you loaded this component with a directive, it would log to the browser console.
-console.log(data);
-
-const Movies: FunctionalComponent = () => {
- // Output the result to the page
- return <div>{JSON.stringify(data)}</div>;
-};
-
-export default Movies;
-```