Closed frederikhors closed 4 years ago
svelte-observable allows loading, value, and error states while svelte's stores are just a value over time. To handle the other states, an approach like Apollo uses in their react library could be used, but you'd still have to check for loading and errors states and I think it's a bit more idiomatic to use Svelte's built-in #await
.
Use svelte's store + Apollo's approach to states:
<script>
// ...
const books = query(client, { query: GET_BOOKS })
</script>
{#if $books.loading}
Loading...
{:else if $books.error}
Error: {$books.error}
{:else}
{$books.data}
{/if}
Use svelte-observable to get built-in loading, data, and error states
<script>
// ...
const books = query(client, { query: GET_BOOKS });
</script>
{#await $books}
Loading...
{:then result}
{#each result.data.books as book}
{book.title} by {book.author.name}
{/each}
{:catch error}
Error: {error}
{/await}
I think both are valid approaches, but personally prefer
Thanks for your answer @timhall. The problem with the second approach is https://github.com/timhall/svelte-apollo/issues/19!
Am I wrong?
We need to write more code to avoid re-rendering.
Why do we need
svelte-observable
?Can we use Svelte directly?