How to do polling in svelte?

Question

I have a specific app which should do the following:

1. You have a list of jobs to inspect
2. When you click a job you get a detail view
3. The detail view will poll the API to see live progress updates

I did a basic implementation in the following REPL: https://svelte.dev/repl/fcdce26dc0d843dbb4b394dcd2c838af?version=3.20.1

There are a couple of issues with this approach:

1. The Job.svelte view should basically reset when you provide a new id, and clear out any previous poller, but now it's super awkward with a reactive statement at the bottom
2. Because the poller does an asynchronous fetch it can happen that the timeout handler poller is cleared even though the handler is executing already. This causes multiple poller loops to occur (you can reproduce this by clicking through the job list at random intervals between 0 and 2 seconds)
3. The current approach is not developer friendly and is easily broken. The 'bug' above can be fixed by keeping track of a reference/lock kind of thing but then it's even harder to wrap your head around.

For this use case, what is a better way of implementing it (in Svelte)?

Thanks a lot!

Answer 1

The Job.svelte view should basically reset when you provide a new id, and clear out any previous poller, but now it's super awkward with a reactive statement at the bottom

Like a previous reply already pointed out, this is the Svelte way. It's awkward at first, until you realize it's very simple, handy and elegant.

There are two things I would improve in your code:

• do away with the messy cache per ID + single progress value assignment ; this is what causes your late fetches to display visually (a late fetch reply in itself is not a bug, displaying it to your user is, however) ; I simply renamed your cache object to progress and chose to display progress[id], this way a late fetch reply will update in the background, but not interfere visually with your currently displayed job
• use setInterval instead of multiple setTimeout for periodic polling

<script>
    export let id

    let progress = {}
    let poller

    const setupPoller = (id) => {
        if (poller) {
            clearInterval(poller)
        }
        poller = setInterval(doPoll(id), 2000)
    }

    const doPoll = (id) => async () => {
        console.log(`polling ${id}`)
        progress[id] = await new Promise(resolve => setTimeout(() => {
            resolve((progress[id] || 0) + 1)
        }, 500))
    }

    $: setupPoller(id)
</script>

<div>
    <p>
        ID: {id}
    </p>
    <p>
        Progress: {progress[id] || 0}
    <p>
</div>

See this REPL

Answer 2

I think 1. is just the way to go on Svelte. There is no ngOnChanges like in angular.

2./3. is a problem independent of Svelte I think. Asynchronous stuff with time races is always hard. Libraries like rxjs make it easier to handle this, but have a steep learning curve. An example:

<script>
  import { interval, Subject } from 'rxjs';
  import { switchMap, take, map, startWith, tap } from 'rxjs/operators';

  const cache = {};
  const id$ = new Subject();
  const progress$ = id$.pipe(
    // every time id$ gets a new id, start new interval
    switchMap(id => {
      return interval(1000).pipe(
        // every time the interval emits, do an api call
        switchMap(() => {
          // fake api call
          return interval(200).pipe(
            take(1),
            map(() => id + '::' + Math.random()),
            // store value in cache
            tap(value => cache[id] = value)
          );
        }),
        // start with cached value
        startWith(cache[id]),
      );
    })
  );

  let id = 1;
  function switchPoll() {
    id = id === 2 ? 1 : 2;
    id$.next(id);
  }
</script>

<p>{$progress$}</p>
<button on:click={switchPoll}>Switch</button>

Answer 3

I would suggest using the await blocks from svelte. With it, you have all the logic you need for asynchronous functionality out of the box, like generating a loading screen or catching errors. I modified your REPL with a custom timeout function (sleep) to simulate data fetching from a remote server:

<script>    
    let selectedJob;
    let progress = 0
        function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }

    const pollProgress = async (id) => {    
        if(progress < 10) {;
      await sleep(300)
            progress += 1
            return pollProgress(id)
        }
        return "Done"
    }   

    function handleClick(id) {
        selectedJob = id
        promise = pollProgress(id);
    }
    let promise
</script>

<style>
    .list {
        background-color: yellow;
        cursor: pointer;
    }

    .details {
        background-color: cyan;
    }
</style>

<div class="list">
  {#each new Array(10).fill().map((_, i) => i) as i}
       <div on:click={() => (handleClick(i))}>
             Job {i}
         </div>
    {/each}
</div>

{#if selectedJob !== undefined}
    <div class="details">
        <h2>Job details</h2>
        <div>
        <p>
        ID: {selectedJob}
    </p>
{#await promise}
    <p>Progress: {progress}</p>
{:then res}
    <p>
        Progress: {res}
    </p>
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}
</div>
    </div>
{/if}

It will display an updating progress to simulate polling while it is fetching the data and the string Done, which it receives as a result from the async function, when it is finished.