Svelte Summit 2020 | Tim Raderschad | Modern Fetch in Svelte using Stores

fetcher.js

import { writable } from 'svelte/store';

const cache = new Map();

export async function getData(url) {
  const store = writeable(new Promise(() => {}));

  if (cache.has(url)) {
    store.set(Promise.resolve(cache.get(url)));
  }

  const load = async () => {
    const response = fetch(url);
    const data = response.json();
    cache.set(url, data);
    store.set(Promise.resolve(data));
  };

  load();

  return store;
}

StoreFetch.svelte

<script>
  import getData from './fetcher.js';

  const response = getData(url);

  {#await $response}
    <Spinner />
  {:then data}
    <code {data}>
  {:catch}
    <Error />
  {/await}
</script>