Svelte: is there a way to cache the api result in a way that it won't trigger the api call everytime the component renders?

Question

It could be that I'm typing the wrong things in Google and can't get a good answer.

Is there a "svelte recommended" way to store the value of a GET result, so that, on every refresh or link switch, the result in the store is used in the component until a timeout (where the api is called again)?

My purpose is to fetch blogposts from an external API and show them in a list but not on every refresh, or link switch.

My code:

<script>
  let posts = [];

  onMount(async () => {
    const res = await fetch(apiBaseUrl + "/blogposts");
    posts = await res.json();
  });
</script>

{#each posts as post}
  <h5>{post.title}</h5>
{/each}

In pseudocode what i want:

if (store.blogposts.timeout === true){
  onMount(...);
  // renew component
} 

Answer 1

you can use stores to achieve this. Initial page load fetch posts data from api and save in stores. Then use the posts data in further page mounts. Set timeout to true whenever you want to refresh data.

./stores.js

import {writable} from 'svelte/store';
export const posts = writable([]);
export const timeout = writable(false);

./posts.svelte

<script>
import {posts, timeout} from "./stores.js"

 onMount(async () => {
   if($posts.length<1 || $timeout == true){
     const res = await fetch(apiBaseUrl + "/blogposts");
     $posts = await res.json();
   }
});
</script>

  {#each $posts as post}
    <h5>{post.title}</h5>
  {/each}

When you refresh the page the posts in stores will clear. To avoid that use localstorage to cache data. pls check the below code. ./posts.svelte

<script>
let posts = [];
 
onMount(async () => { 
 posts = await getdata();
 } 
 
const getdata = async ()=>{
  // set cache lifetime in seconds
  var cachelife = 5000; 
   //get cached data from local storage
    var cacheddata = localStorage.getItem('posts'); 
    if(cacheddata){
     cacheddata = JSON.parse(cacheddata);
     var expired = parseInt(Date.now() / 1000) - cacheddata.cachetime > cachelife;
      }
    //If cached data available and not expired return them. 
    if (cacheddata  && !expired){
     return cacheddata.posts;
    }else{
    //otherwise fetch data from api then save the data in localstorage 
     const res = await fetch(apiBaseUrl + "/blogposts");
     var posts = await res.json();
     var json = {data: posts, cachetime: parseInt(Date.now() / 1000)}
     localStorage.setItem('posts', JSON.stringify(json));
     return posts;
    }
  }
 
{#each posts as post}
<h5>{post.title}</h5>
{/each}
    

Answer 2

svelte-query can help:

Svelte Query is often described as the missing data-fetching library for Svelte, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your Svelte applications a breeze.

note: svelte-query is abandoned and will be replaced with @tanstack/svelte-query