I have a collection called "Movies" that I want to pull a random set of 3 posts from and display them using an astro component called "MovieCard" on every page load—is this doable without a framework? Even with a framework, I can't figure out how to pull this off.
#how can I display a random post from a collection on each page load?
gaunt raptor
scenic torrentBOT
Hi @gaunt raptor. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, it's possible to pull a random set of 3 posts from your "Movies" collection and display them using an Astro component called "MovieCard" on every page load. You can use Astro's getCollection() function to fetch all posts from your "Movies" collection, then randomly select 3 posts from the fetched collection.
Here's a basic example of how you can do this:
---
import { getCollection } from 'astro:content';
import MovieCard from '../components/MovieCard.astro';
// Get all `src/content/movies/` entries
const allMovies = await getCollection('movies');
// Randomly select 3 movies
const randomMovies = allMovies.sort(() => 0.5 - Math.random()).slice(0, 3);
---
{randomMovies.map((movie) => <MovieCard movie={movie} />)}
In this example, getCollection('movies') fetches all posts from your "Movies" collection. The sort(() => 0.5 - Math.random()) function shuffles the array of movies, and slice(0, 3) selects the first 3 movies from the shuffled array. Then, for each of the selected movies, a MovieCard component is rendered.
Please note that this code should be placed in the Astro component where you want to display the random movies.
For more information on querying collections, you can refer to the Astro documentation on Content Collections (https://docs.astro.build/en/guides/content-collections/#querying-collections).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
gaunt raptor
@scenic torrent I believe this will only set the randomMoves const at build time, not on every page load—how could I modify this so that the random selection will be different every time the page is reloaded?
scenic torrentBOT
Let me check the knowledge base for you. One moment! :books:
You're correct, the code snippet provided will only set the randomMovies constant at build time. This is because Astro, by default, generates static HTML at build time.
To have the random selection be different every time the page is reloaded, you would need to move the random selection logic to the client-side. This means you would need to use JavaScript that runs in the browser after the page has loaded.
However, based on the provided extracts, there isn't enough information on how to implement this specifically in Astro. You might need to fetch the data from an API on the client-side and then use JavaScript to randomly select and display the movies.
Here's a general idea of how you could approach this:
// Client-side JavaScript
fetch('/api/movies')
.then(response => response.json())
.then(movies => {
const randomMovies = movies.sort(() => 0.5 - Math.random()).slice(0, 3);
// Code to display the movies goes here
});
In this example, /api/movies would be an endpoint that returns all your movies. This code would run every time the page is loaded, so the selection of movies would be different each time.