michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update collections.md (#549)

Browse source 
Updating the Individual Pages from a Collection example to fix a few typos.

- The pokemon API returns an object with an array named `results` (plural)
- `data()` needs to wrap the object in an Array
- accessing item data needs to use `collection.data[0]` to grab data from the `data()` Array
This commit is contained in:
Tony @ Navillus 2021-06-25 23:07:11 +02:00 • committed by GitHub
parent f3e005de6f
commit 245632bc31
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
docs/collections.md
View file

@ -162,7 +162,7 @@ const { collection } = Astro.props;
export async function createCollection() { export async function createCollection() {
const allPokemonResponse = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`); const allPokemonResponse = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`);
const allPokemonResult = await allPokemonResponse.json(); const allPokemonResult = await allPokemonResponse.json();
const allPokemon = allPokemonResult.result; const allPokemon = allPokemonResult.results;
return { return {
// `routes` defines the total collection of routes as data objects. // `routes` defines the total collection of routes as data objects.
routes: allPokemon.map((pokemon, i) => { routes: allPokemon.map((pokemon, i) => {
@ -175,8 +175,9 @@ export async function createCollection() {
// Luckily we had already loaded all of the data at the top of the function, // Luckily we had already loaded all of the data at the top of the function,
// so we just filter the data here to group pages by first letter. // so we just filter the data here to group pages by first letter.
// If you needed to fetch more data for each page, you can do that here as well. // If you needed to fetch more data for each page, you can do that here as well.
// Note: data() is expected to return an array!
async data({ params }) { async data({ params }) {
return allPokemon[params.index]; return [allPokemon[params.index]];
}, },
// Note: The default pageSize is fine because technically only one data object // Note: The default pageSize is fine because technically only one data object
// is ever returned per route. We set it to Infinity in this example for completeness. // is ever returned per route. We set it to Infinity in this example for completeness.
@ -188,7 +189,7 @@ export async function createCollection() {
<head> <head>
<title>Pokemon: {collection.params.name}</head> <title>Pokemon: {collection.params.name}</head>
<body> <body>
Who's that pokemon? It's {collection.data.name}! Who's that pokemon? It's {collection.data[0].name}!
</body> </body>
</html> </html>
``` ```