Kevin Powell - Community•16mo ago

Help with svelte component in astro

This is my [page].astro- which is supposed to be index of all episodes fetched from spotify api. It only fetches 20 episodes, I want to fetch more episodes when ''next" button is clicked. The next button is in my component folder as NextButton.svelte. I want to trigger a function but the button in svelte component not working [page].astro

---


import { main ,loadMoreEpisodes } from '../../utils/app.js';
import NextButton from '../../components/NextButton.svelte'


export async function getStaticPaths({paginate}){
    const episodes = await main()
    return paginate(episodes, { pageSize: 20 });
}
const { page } = Astro.props;

---

<Layout title="Episodes" > 
    <div class="bg-slate-900">
        <Navbar /> 
        <h1 class="">
            <span class="">
               Browse Episodes 
            </span>
        </h1>
        <h1>Page {page.currentPage}</h1>
       
        
       
        <NextButton />
        <button this-one>CLick this</button>

            <div class="text-white mx-auto"> 
            {page.data.map(episode => (
                    <EpisodeCard 
                    href={`/episodes/${episode.id}`} 
                    title={episode.name} 
                    body={episode.description.slice(0,145)+'...'}
                    img={episode.images[0].url}/>
            ))     
            }     
           
            
            </div>
            
</Layout> 

<script>

    import { main, fetchNextEpisodes } from "../../utils/app";
    console.log("page rendereed");
    const buttons = document.querySelector("[this-one]")
    buttons.addEventListener('click',()=>fetchNextEpisodes());

</script>

---


import { main ,loadMoreEpisodes } from '../../utils/app.js';
import NextButton from '../../components/NextButton.svelte'


export async function getStaticPaths({paginate}){
    const episodes = await main()
    return paginate(episodes, { pageSize: 20 });
}
const { page } = Astro.props;

---

<Layout title="Episodes" > 
    <div class="bg-slate-900">
        <Navbar /> 
        <h1 class="">
            <span class="">
               Browse Episodes 
            </span>
        </h1>
        <h1>Page {page.currentPage}</h1>
       
        
       
        <NextButton />
        <button this-one>CLick this</button>

            <div class="text-white mx-auto"> 
            {page.data.map(episode => (
                    <EpisodeCard 
                    href={`/episodes/${episode.id}`} 
                    title={episode.name} 
                    body={episode.description.slice(0,145)+'...'}
                    img={episode.images[0].url}/>
            ))     
            }     
           
            
            </div>
            
</Layout> 

<script>

    import { main, fetchNextEpisodes } from "../../utils/app";
    console.log("page rendereed");
    const buttons = document.querySelector("[this-one]")
    buttons.addEventListener('click',()=>fetchNextEpisodes());

</script>

NextButton.svelte

<script>

import {fetchNextEpisodes} from '../utils/app.js';
async function handleClick(){
  await fetchNextEpisodes();
}

</script>
<button class="primary" on:click={handleClick}>Next ep</button>

<script>

import {fetchNextEpisodes} from '../utils/app.js';
async function handleClick(){
  await fetchNextEpisodes();
}

</script>
<button class="primary" on:click={handleClick}>Next ep</button>

4 Replies

croganm•16mo ago

Make sure to hydrate your NextButton Astro does not hydrate components unless you tell it to Not 100% sure this is the right solution but here's more info so you can try it

croganm•16mo ago

https://docs.astro.build/en/core-concepts/framework-components/#hydrating-interactive-components

Astro Documentation

Framework Components

Learn how to use React, Svelte, etc.

JOYOP•16mo ago

ye it worked thanks putting

client:load

client:load

helped

croganm•16mo ago

👍

Gaming

Programming

Help with svelte component in astro