timhall / svelte-apollo

Svelte integration for Apollo GraphQL
MIT License
947 stars 68 forks source link

Why do we need svelte-observable? #44

Closed frederikhors closed 4 years ago

frederikhors commented 4 years ago

Why do we need svelte-observable?

Can we use Svelte directly?

timhall commented 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

frederikhors commented 4 years ago

Thanks for your answer @timhall. The problem with the second approach is https://github.com/timhall/svelte-apollo/issues/19!

Am I wrong?

frederikhors commented 4 years ago

We need to write more code to avoid re-rendering.