Error: {#each} only works with iterable values.

[lukasmalkmus]

Disclaimer: I'm new to Svelte and not too familiar with TypeScript.

I'm following the README but adapting it along the way for my own project. The API endpoint I'm calling is very similar to the petstore example: It is returning an array of objects.

For reference, this is the READMEs example:

<script lang="ts">
  import { findPetByStatus } from 'src/api.ts'
  const request = findPetByStatus({ status: 'sold' })
  const petsReady = request.ready
</script>

<div>
  {#await $petsReady}
    <p>Loading..</p>
  {:then resp}
    {#if resp.ok}
      {#each resp.data as pet}
        <p>{pet.name}</p>
      {/each}
    {:else}
      <p>Error while loading pets</p>
    {/if}
  {/await}

  <button on:click={() => {request.reload()}}>
    Reload pets
  </button>
</div>

Couple of things I noticed so far.

1. My API call doesn't take any params but I still had to pass an empty config: findPetByStatus({}). I thought I could use findPetByStatus()?
2. {#if resp.ok} should be {#if resp?.ok}
3. resp.data is an array (see screenshot below) but I still get Error: {#each} only works with iterable values.. I looked at the demo project which passes resp.data to another Svelte component that exports a typed property. But I haven't yet figured out how to pull that of without a child component (e.g. something like doing {#each (resp.data as MyArrayType) as pet}).

Edit: I also tried to subscribe to the response store as per the README (Subscribing to response store) and save the result into let devices: Devices = [];. Still the same error.