#Pagination with getStaticPaths. Requires multiple fetch requests

1 messages · Page 1 of 1 (latest)

ornate glade
glacial doveBOT
#

Hi @ornate glade. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Sure, I can help you with that. You can use the getStaticPaths() function in Astro to generate pages for each color. You would need to make multiple fetch requests to the API to get the first 200 colors, as the API only returns 20 results at a time. Here's an example of how you could do this:

---
// src/pages/colors/[id].astro
import fetch from 'node-fetch';

export async function getStaticPaths() {
  let colors = [];
  for (let i = 0; i < 10; i++) {
    const response = await fetch(`<https://www.colourlovers.com/api/colors/?format=json&resultOffset=${i*20}&numResults=20`>);
    const data = await response.json();
    colors = [...colors, ...data];
  }
  return colors.slice(0, 200).map((color) => ({
    params: { id: color.id.toString() },
    props: { color },
  }));
}

const { color } = Astro.props;
---
<html>
  <head>
    <title>{color.title}</title>
  </head>
  <body>
    <h1>{color.title}</h1>
    <img src={color.imageUrl} alt={color.title} />
  </body>
</html>

In this example, we're making 10 fetch requests to the API, each time increasing the resultOffset by 20 to get the next set of colors. We then combine all the results into a single array, and use the getStaticPaths() function to generate a page for each color. The color data is passed to each page as a prop, which we can then use in our Astro component.

Please note that you'll need to replace [id] in the file path with the actual parameter you want to use for your pages. In this case, we're using the color's id.

For more information on dynamic routing and the getStaticPaths() function in Astro, you can refer to the Astro documentation (https://docs.astro.build/core-concepts/routing).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: