diff options
| author |  Fred K. Schott <fkschott@gmail.com>
| 2021-06-29 13:12:27 -0700 |
|---|---|---|
| committer | Fred K. Schott <fkschott@gmail.com>
| 2021-06-29 13:12:27 -0700 |
| commit | 9c7921300c5aae35ee947be5fc515e5b3fdaf1a2 (patch) | |
| tree | 94dc4d802341e827466f641de97acf74905c706c /docs/guides/data-fetching.md | |
| parent | 4df98a79f8d5f14e9e049322a6eef2db4f985ae4 (diff) | |
| parent | 279a25246260ef95459d29c8029b18bd89adc206 (diff) | |
| download | astro-9c7921300c5aae35ee947be5fc515e5b3fdaf1a2.tar.gz astro-9c7921300c5aae35ee947be5fc515e5b3fdaf1a2.tar.zst astro-9c7921300c5aae35ee947be5fc515e5b3fdaf1a2.zip | |
Merge branch 'docs-sync-1'
Diffstat (limited to 'docs/guides/data-fetching.md')
| -rw-r--r-- | docs/guides/data-fetching.md | 25 |
1 files changed, 25 insertions, 0 deletions
diff --git a/docs/guides/data-fetching.md b/docs/guides/data-fetching.md new file mode 100644 index 000000000..29a5bb160 --- /dev/null +++ b/docs/guides/data-fetching.md @@ -0,0 +1,25 @@ +--- +layout: ~/layouts/Main.astro +title: Data Fetching +--- + +Astro support `fetch()` and "top-level await" to help you do remote data fetching inside of your page. See the ["Data Loading" Pages section](/docs/core-concepts/astro-pages.md#data-loading) for more info. + +**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. + +## Example +```astro +// Example: src/pages/foo.astro +// top-level `fetch()` and `await` are both supported natively in Astro (pages only). +const allPokemonResponse = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`); +const allPokemonResult = await allPokemonResponse.json(); +const allPokemon = allPokemonResult.results; +--- +<html lang="en"> + <head> + <title>Original 150 Pokemon</head> + <body> + {allPokemon.map((pokemon) => (<h1>{pokemon.name}</h1>))} + </body> +</html> +```
\ No newline at end of file |