example.svelte

<script>
  import { onMount } from 'svelte';
  import { posts } from './blogStore.js';

  onMount(async () => {
    const data = await fetchPosts();
    posts.set(data);
  })

  const fetchPosts = async (url=null) => {
    const res = await fetch(url || 'http://localhost:8000/api/posts/');
    return await res.json();
  }

  const handleNextPage = async (url) => {
    const nextPage = await fetchPosts(url);
    posts.update(x => ({...x, ...nextPage}));
  }

</script>

<h1>Post List</h1>

<p>{JSON.stringify($posts.results)}</p>

<ul>
  {#each $posts.results as post}
  <li>{post.title}</li>
  {/each}
</ul>

<p>
  <span on:click={() => handleNextPage($posts.previous)}>prev</span> |
  <span on:click={() => handleNextPage($posts.next)}>next</span>
</p>